Vue-cli3项目 配置webpack (Vue.config.js)

1.webpack配置路径别名

2.webpack全局注入通用样式

3.webpack引入第三方插件，如Amap，QRcode等

在项目的根目录下新建 vue.config.js 文件（是根目录，不是src目录），如图：

配置实例如下：

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const fs = require('fs')

module.exports = {
  baseUrl: './',
  runtimeCompiler: true,
  // 配置路径别名
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components/'))
      .set('_as', resolve('src/assets/img/'))
  },
  // 传递第三方插件选项
  pluginOptions: {
    'AMap': 'AMap',
    'QRCode': 'QRCode'
  },
  // 全局注入通用样式
  css: {
    loaderOptions: {
      stylus: {
        data: fs.readFileSync('./src/assets/stylus/mixins.styl', 'utf-8')
      }
    }
  }
}

具体见官方文档 https://cli.vuejs.org/zh/config/#vue-config-js