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')
}
}
}
}