由于css中的svg，无法使用vue cli 3模板构建项目

Question

在转移到vue-cli 3时，我遇到了以下问题。我将插件的CSS导入我的app.scss。

这一行：background-image: url(default-skin.svg);打破yarn build，抛出此错误：

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: navigator is not defined

这是我的vue.config.js：

const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')

const ASSETS_DIR = 'static'

module.exports = {
  assetsDir: ASSETS_DIR,
  runtimeCompiler: true,
  chainWebpack: config => {
    config
      .plugin('provide-plugin')
        .use(webpack.ProvidePlugin, [{
          axios: "axios",
          $: "jquery",
          jQuery: "jquery",
          _: "lodash",
          mapGetters: ['vuex', 'mapGetters'],
          mapActions: ['vuex', 'mapActions']
        }])
        .end()
      .plugin('copy-plugin')
        .use(CopyWebpackPlugin, [
          [{
            from: path.resolve(__dirname, 'static'),
            to: ASSETS_DIR,
            ignore: ['.*']
          }]
        ])
        .end()
      .plugin('sprite-loader-plugin')
        .use(SpriteLoaderPlugin)

    config.module
      .rule('svg')
        .test(/\.svg$/)
        .use('file-loader')
          .loader('svg-sprite-loader')
  }
}

有解决方案吗

更新

The css which breaks yarn build

的package.json：

{
  "name": "f2c",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Victor Ponamariov <[email protected]>",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "animate.css": "^3.6.1",
    "axios": "^0.18.0",
    "blueimp-canvas-to-blob": "^3.14.0",
    "fabric": "^2.3.3",
    "flexboxgrid": "^6.3.1",
    "intl-tel-input": "^12.4.0",
    "jquery": "^3.3.1",
    "libphonenumber-js": "^1.2.21",
    "lodash": "^4.17.10",
    "masonry-layout": "^4.2.1",
    "moment": "^2.22.2",
    "nprogress": "^0.2.0",
    "perfect-scrollbar": "^1.4.0",
    "photoswipe": "^4.1.2",
    "portal-vue": "^1.3.0",
    "raven-js": "^3.25.2",
    "sharer.js": "^0.3.3",
    "stickyfilljs": "^2.0.5",
    "tippy.js": "^2.5.2",
    "vee-validate": "^2.0.6",
    "vue": "^2.5.2",
    "vue-analytics": "^5.14.0",
    "vue-carousel": "^0.9.0",
    "vue-clipboard2": "^0.1.1",
    "vue-cropperjs": "^2.2.0",
    "vue-gtm": "^1.0.2",
    "vue-i18n": "^8.0.0",
    "vue-infinite-loading": "^2.3.3",
    "vue-infinite-scroll": "^2.0.2",
    "vue-meta": "^1.5.2",
    "vue-mq": "^0.2.1",
    "vue-multiselect": "^2.1.0",
    "vue-perfect-scrollbar": "^0.1.0",
    "vue-popperjs": "^1.2.6",
    "vue-router": "^3.0.1",
    "vue-select": "^2.4.0",
    "vue-slider-component": "^2.7.4",
    "vue-social-sharing": "^2.3.3",
    "vue-star-rating": "^1.6.0",
    "vue-sweetalert2": "^1.5.2",
    "vue-tippy": "^2.0.18",
    "vue-yandex-metrika": "^1.6.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.5",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.5",
    "@vue/cli-service": "^3.0.0-rc.5",
    "copy-webpack-plugin": "^4.5.2",
    "node-sass": "^4.9.2",
    "normalize.css": "^8.0.0",
    "postcss-import": "^11.1.0",
    "postcss-url": "^7.3.2",
    "sass-loader": "^7.0.3",
    "svg-sprite-loader": "^3.8.0",
    "vue-template-compiler": "^2.5.16",
    "webpack-svgstore-plugin": "^4.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "globals": {
      "$": false,
      "jQuery": false,
      "_": false,
      "axios": false,
      "VK": false,
      "gapi": false,
      "FB": false,
      "mapGetters": false,
      "mapActions": false
    },
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-import": {},
      "postcss-url": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

App文件夹结构：

Answer 1

我没有修复或完整的解释，但有一个解决方法......

当从SFC的postcss-import标签内导入CSS文件时，问题似乎是由<style>引起的：

// App.vue
<style lang="scss">
  @import 'app.scss'; /* imports default.css -> default-skin.svg */
</style>

您可以通过将导入移动到<script>标记（或main.js）来解决构建错误：

// App.vue
<script>
  import 'app.scss'; /* imports default.css -> default-skin.svg */
</script>

见GitHub repo

Answer 2

Ref vue-pswipe，GuoQichen将此配置用于svg。

config.module
  .rule('svg')
  .use('file-loader')
  .clear()
  .loader('url-loader')
  .options({
    limit: 4 * 1024,
    name: 'img/[name].[hash:8].[ext]',
  })

Answer 3

尝试删除节点模块文件夹，然后再次运行yarn install。

如果没有用，试试：

global.navigator = {
  userAgent: 'node.js'
};