const path = require("path");
const uglifyJsPlugin = require("uglifyjs-webpack-plugin");
const IsProduction = process.env.NODE_ENV === "production";
// 引入文件
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: "./",
// 输出文件目录
outputDir: "dist",
// eslint-loader 在保存的时候校验
lintOnSave: true,
devServer: {
compress: false, // 是否压缩
open: true, // 启动默认打开浏览器
proxy: {
"/api": {
target: "http://www.xxx.com",
ws: true, // websocket
changeOrigin: true,
pathRewrite: {
"/api": "/"
}
}
},
},
// css相关配置
css: {
extract: true, // css分离插件 自带
sourceMap: false, // 方便开发 错误定位
loaderOptions: {
sass: {
prependData: `@import "@/assets/common/reset.scss";`
}
},
modules: false // 是否启用css-moudle
},
chainWebpack: config => {
config.resolve.alias
.set("@", resolve("src"))
.set("@img", resolve("src/assets/img"))
.set("@api", resolve("src/api/api"));
if (IsProduction) {
// 删除预加载
config.plugins.delete("preload");
// 开启代码压缩
config.optimization.minimize(true);
// 分割代码 相同代码放一块
config.optimization.splitChunks({
chunks: "all"
});
}
// 开发环境
},
configureWebpack: config => {
if (IsProduction) {
config.plugins.push(
new uglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true
},
sourceMap: false,
// 多进程
parallel: true
}
})
);
} else {
// 开发环境
}
},
productionSourceMap: false,
// 启动并行化 默认 ("os").cpus().length-1
parallel: require("os").cpus().length > 1,
}
全局变量分生产和开发环境,做类似if判断,现在.env即可
.env 做全局,不分环境
.env.production和.env.development 针对各自环境变量
package.json
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
当然如果你想要test,也可以,这里就不多说了,方法类似
VUE_APP_a=http://www.baidu.com // 前缀VUE_APP_ 不然不识别
取值
process.env.xx