标签: vue-cli

我有一个使用Vue CLI的应用程序.当应用加载时,我有一堆图像,当用户点击按钮时会出现转换.问题在于,当用户单击按钮时,相应的图像才开始加载,这意味着大部分动画在此之前完成.这使得体验非常不稳定,因为图像在过渡期间突然弹出,取代了其他元素.我想在网站加载时预取它们.

这个答案建议使用该Image课程.但是,根据Vue CLI文档,Vue内部使用自己的插件preload-webpack-plugin,显然可以配置它.

我尝试配置它以便预加载图像:

vue.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin(),
      new PreloadWebpackPlugin({
        rel: 'prefetch',
        as (entry) {
          if (/\.css$/.test(entry)) return 'style';
          if (/\.woff$/.test(entry)) return 'font';
          if (/\.png$/.test(entry)) return 'image';
          return 'script';
        }
      })
    ]
  }
}

这只会搞砸最后一个index.html,留下它没有内置的构建脚本和样式.

如果我删除此行:

      new HtmlWebpackPlugin(),

该网站仍然加载但图像不是预取的.这就像我从未在vue.config.js文件中做过任何事情一样.

如何正确设置？

编辑:在Vue组件中,我require()用来加载图像,这意味着它们通过Webpack.例如:

<img :src="require('../assets/img/' + img)" draggable="false">

编辑:我能够像Roy J在评论中建议的那样预取图像: …

是否可以assets/在某个静态.scss文件中包含一个图像,这个图像在一个静态文件中background-image？

我有一个_buttons.scss部分和一些按钮有一个图标,我想添加为background-image.图标位于src/assets/foder中.

应用结构:

- src
  - assets
    some_icon.svg
  - components
  - scss
    _buttons.scss
    main.scss
  - views
  App.vue
  main.js
  router.js

并在_buttons.scss:

.some-selector {
    background-image: url(../assets/some_icon.svg)

    /* also tried
    background-image: url(./assets/some_icon.svg)
    background-image: url(/assets/some_icon.svg)
    background-image: url(assets/some_icon.svg)
    */
}

哪个返回错误This relative module was not found.

我知道我可以简单地在我的组件或主App.vue中添加这些样式(范围与否),但是,我想知道如果没有它可以实现这一点吗？

我也知道我可以在我的public文件夹中添加这些图标,但我希望图标保留在assets/文件夹中.

$ vue -V
$ 3.0.0-rc.5

也许一些自定义webpack配置？

谢谢

我有以下package.json文件：

{
    "name": "view",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@vue-leaflet/vue-leaflet": "^0.6.1",
        "autoprefixer": "^10.3.1",
        "core-js": "^3.6.5",
        "gpxparser": "^3.0.8",
        "leaflet": "^1.7.1",
        "postcss": "^8.3.6",
        "tailwindcss": "^2.2.7",
        "typescript": "^4.3.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
        "vue3-openlayers": "^0.1.38",
        "vuex": "^4.0.2"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^5.0.0-beta.3",
        "@vue/cli-plugin-eslint": "^5.0.0-beta.3",
        "@vue/cli-plugin-router": "^5.0.0-beta.3",
        "@vue/cli-service": "^5.0.0-beta.3",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^7.32.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-vue": "^7.0.0",
        "prettier": "^2.2.1",
        "sass": "^1.26.5",
        "sass-loader": "^8.0.2"
    }
}

如何将打字稿添加到这个 …

我正在开发一个具有不同vuejs app实例的项目.

main-project
    > app1
        > src
        > build
        -- main.js
        -- App.vue
        -- package.json
    > app2
        > src
        > build
        -- main.js
        -- App.vue
        -- package.json
    > app3
        > src
        > build
        -- main.js
        -- App.vue
        -- package.json
        .
        .
        .
        .

我创建了使用这些应用程序vue-cli:vue init webpack app1,vue init webpack app2等等.当我使用webpack以下文件构建这些应用程序时

main-project
    > dist
        > assets
            > app1
                -- app.css
                -- vendor.js
                -- app.js
                -- manifest.js
            > app2
                -- app.css
                -- vendor.js
                -- …

我已经使用vue cli v3完成了一个项目。建立项目后，我看到了2条警告，即

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

This can impact web performance.

Assets:

  js/chunk-vendors.2557157d.js (474 KiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:

  app (617 KiB)

      js/chunk-vendors.2557157d.js

      css/app.821fcb13.css

      js/app.b5a47a94.js

现在检查后，我发现如果我在webpack配置中添加以下内容

performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
}

然后它将自动将js文件分成小块。现在在vue cli 3中没有webpack.config文件。

因此，如果您可以指导如何实现此方法，以便当文件超过一定限制时自动将其分块，这将非常有帮助。

这是我看到的地方：https : //github.com/webpack/webpack/issues/3486#issuecomment-397915908

期待你的回复。

PS：我读过这并试图创建vue.config.js文件并添加里面的文件进行以下

module.exports = {
  configureWebpack: …

我正在使用webpack模板和vuetify构建一个Vue.js应用程序.要导入vuetify css我在我的App.vue中这样做

<style> @import '../node_modules/vuetify/dist/vuetify.min.css' </style>

这是正确的还是唯一的方式？因为在使用多个UI组件时它似乎不可靠.

sass-resource-loader几周前,我使用3.0版本的CLI成功配置了一个新的Vue项目,使用此处发布的信息:使用sass-resources-loader和vue-cli v3.x

但是,今天更新了所有内容后,我在运行时遇到以下错误npm run serve:

TypeError: Cannot read property 'scss' of undefined

似乎被传递的唯一选项.tap(options)是:

{ compilerOptions: { preserveWhitespace: false } }

我目前还不知道chainWebpack有效调试,但我正在研究它.如果有人对变更导致此错误的内容有任何见解,我们将不胜感激.

我的vue.config.js:

const path = require('path')

module.exports = {
  chainWebpack: (config) => {
    config
      .module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        console.log(options)
        options.loaders.scss = options.loaders.scss.concat({
          loader: 'sass-resources-loader',
          options: {
            resources: [
              path.resolve('./src/scss/_variables.scss'),
              path.resolve('./src/scss/_mixins.scss')
            ]
          },
        })
        return options
      })
    config
      .module
      .rule('scss')
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: [
          path.resolve('./src/scss/_variables.scss'),
          path.resolve('./src/scss/_mixins.scss')
        ]
      }) …

每次我尝试创建一个新项目(vue create my-project)时,我都会收到此错误:

错误:命令失败:npm install --lllvel错误

我在PC/Windows 10,Vue-cli 3.2.1,节点8.11.3,Npm 5.6.0.预设:Babel,ESLint和Prettier,SASS,Vue路由器,Vuex

从日志中:

2736傻saveTree` - vuex@3.0.1

2737 warn ajv-keywords@2.1.1需要ajv@^5.0.0的对等体,但没有安装.您必须自己安装对等依赖项.

2738详细堆栈错误:EINVAL:无效参数,读取

知道这意味着什么以及如何解决它？

编辑:我发现排除任何lint功能使问题消失.所以问题就变成了:我怎样才能使用linting并使其工作？

我正在尝试为生产构建一个 vue.js 应用程序。此错误消息总是在中途出现。

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

我已经尝试通过添加来增加内存--max_old_space_size=4096，甚至尝试将其更改为8192，但无济于事。我使用的是带有 8 GB RAM 的 Mac，所以我不确定为什么会发生这种情况。

这是我为npm run build运行的代码：

vue-cli-service build --max_old_space_size=4096

使用Vuecli生成的Vue和webpack构建.有很多魔法在继续.我无法弄清楚的是如何生成IE所需的供应商前缀.

这是从github问题复制的:https://github.com/vuejs-templates/webpack/issues/421#issuecomment-284322065

VUE-loader.conf.js

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  postcss: [
    require('postcss-import')(),
    require('autoprefixer')({
      browsers: ['ie >= 9']
    })
  ]
}

简单容器组件示例

容器/ index.vue

<template>
    <div class="container">
        <slot></slot>
    </div>
</template>
<script>
    import './index.scss'
    export default {}
</script>

容器/ index.scss

// this is aliased in webpack.base.conf
@import "~styles/base-config";

.container {
  @include grid(); // this generates display:flex and …