vue.config.js
3.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
publicPath: "./", // 编译后的地址，可以根据环境进行设置
outputDir: "dist", // 生产环境构建文件的目录
assetsDir: "static", // 静态文件目录
lintOnSave: false, //是否开启编译时是否不符合eslint提示
productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
devServer: {
hot:true,
port: 8081, // 端口
open: false, // 启动后打开浏览器
compress: true,
overlay: {
// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
warnings: false,
errors: true,
},
proxy: {
"/": {
target:"http://121.40.127.171",
changeOrigin: true,
ws:true,
},
},
disableHostCheck: true
},
css: {
extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
sourceMap: false,
},
chainWebpack: (config) => {
config.plugin('html').tap(args => {
args[0].title = '云平台';
return args;
});
config.resolve.alias
.set("@", resolve("src"))
.set("assets", resolve("src/assets"))
.set("components", resolve("src/components"))
.set("router", resolve("src/router"))
.set("utils", resolve("src/utils"))
.set("store", resolve("src/store"))
.set("views", resolve("src/views"))
.set("api", resolve("src/api"));
if (IS_PROD) {
config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
{
analyzerMode: "static",
},
]);
}
config.when(IS_PROD, (config) => {
config.devtool("cheap-source-map");
config
.plugin("ScriptExtHtmlWebpackPlugin")
.after("html")
.use("script-ext-html-webpack-plugin")
.end();
config.optimization.splitChunks({
chunks: "all",
cacheGroups: {
// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
commons: {
name: "chunk-commons",
test: resolve("src/components"),
minChunks: 3, // 被至少用三次以上打包分离
priority: 5, // 优先级
reuseExistingChunk: true, // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
},
node_vendors: {
name: "chunk-libs",
chunks: "initial", // 只打包初始时依赖的第三方
test: /[\\/]node_modules[\\/]/,
priority: 10,
},
elementUI: {
name: "chunk-elementUI", // 单独将 elementUI 拆包
priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
test: /[\\/]node_modules[\\/]_?element(.*)/,
},
},
});
config.optimization.runtimeChunk("single");
config.optimization.minimize(true);
});
},
};