vue-cli3.0創建項目時沒有創建vue.config.js,可以自己在根目錄下創建該文件
const path = require('path') //路徑
const uglifyJsPlugin = require('uglifyjs-webpack-plugin') //npm install uglifyjs-webpack-plugin --save-dev
//生產環境
const isProduction = process.env.NODE_ENV === 'production'
//引入文件的方法
function resolve(dir){
return path.join(__dirname, dir)
}
module.exports = {
//基本路徑
publicPath: './', //原先是 baseUrl publicPath代替
//輸出文件目錄
outputDir: 'dist',
//放置生成的靜態資源 (js、css、img、fonts)的(相對於outputDir的)目錄
//assetsDir: './',
//指定生成的index.html 的輸出路徑(相對於outputDir) 也可以是一個絕對路徑
//indexPath: './',
//eslint-loader 在保存的時候進行檢查
lintOnSave: true,
devServer: {
compress: false,//開啓壓縮
// open: true,//自動開啓瀏覽器
// proxy: {
// '/apply': {
// target: 'http:xxx.com', //需要代理的服務器地址
// ws: true, //websocket與後臺形成一個通道 持續的
// changeOrigin: true, //是否允許跨域
// pathRewrite: { //重寫
// '/api': '/'
// }
// }
// }
},
//css 相關設置
css: {
//是否使用 css分離插件 ExtractTextPlugin
extract: true,
//sourceMap是什麼 (主要是方便開發人員的錯誤定位) 如果爲true打包時間大大增加
sourceMap: false,
//css預處理器配置
loaderOptions: {
//pass options to sass-loader
sass: {
//引入全局變量樣式
data: `
@import "@/assets/common/index.sass"
`
}
},
// 啓用 CSS modules for all css / pre-processor files(v3用modules v4用requireModuleExtension)
requireModuleExtension: false,
},
//webpack配置
chainWebpack: config => {
//配置別名 不配置會報錯
config.resolve.alias
.set('@', resolve('src'))
.set('@img', resolve('src/assets/img'))
.set('@sass', resolve('src/assets/common'))
//生產環境配置
if(isProduction){
//刪除預加載
config.plugins.delete('preload')
config.plugins.delete('prefetch')
//開啓壓縮代碼
config.optimization.minimize(true)
//分割代碼
config.optimization.splitChunks({
chunks: 'all'
})
//生產環境注入cdn
}
},
configureWebpack: config => {
if(isProduction){
//用cdn方式注入
//爲生產環境修改配置
config.plugins.push(
//生產環境自動刪除console
new uglifyJsPlugin({
uglifyOptions: {
compress: {
//waring: false
drop_debugger: true,
drop_console: true
}
},
//是否生成sourcemap
sourceMap: false,
//使用多進程並行來提高構建速度
parallel: true
})
)
}else{
//爲開發環境修改配置
//也可以爲測試環境配置
}
},
//生產環境是否生成 sourceMap文件
productionSourceMap: false,
// 啓用並行化 默認的併發數:os.cpus().length - 1,並行化可以顯著加速構建
parallel: require('os').cpus().length > 1,
}