自用vue.config.js配置
love 2021-02-01
# 自用vue.config.js配置
const FileManagerPlugin = require("filemanager-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 格式化时间
function formatTime() {
var date = new Date(),
Y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate(),
H = date.getHours(),
i = date.getMinutes();
if (m < 10) {
m = "0" + m;
}
if (d < 10) {
d = "0" + d;
}
if (H < 10) {
H = "0" + H;
}
if (i < 10) {
i = "0" + i;
}
var t = Y + m + d + "-" + H + i;
return t;
}
module.exports = {
// 配置 axios 代理请求
productionSourceMap: false,
assetsDir: "static", // 静态目录
outputDir: "pwa-dist",
publicPath: "/",
devServer: {
host: "0.0.0.0", //ip地址
hot: true, //热加载
port: 8000, //端口
https: false, //false关闭https,true为开启
open: true, //自动打开浏览器
proxy: {
"/api": {
// target: "https://localhost:3000/api",
// 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
changeOrigin: true,
ws: true,
pathRewrite: {
// 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api/xxx即可
"^/api": "/"
}
}
}
// https: true 打开https 用于测试线上是否存在部分资源未替换https证书
},
// pwa背景、图表等详细配置
pwa: {
name: "视频",
short_name: "视频",
themeColor: "#1D1D1D",
msTileColor: "#1D1D1D",
workboxOptions: {
runtimeCaching: [
{
// 匹配包含`api`的任何同源请求。
urlPattern: new RegExp(".*.html"),
// 应用网络优先策略。
handler: "networkFirst"
}
],
importWorkboxFrom: "cdn",
globPatterns: [".*.html"],
skipWaiting: true,
clientsClaim: true,
navigateFallback: "/index.html"
}
},
lintOnSave: process.env.NODE_ENV !== "production",
configureWebpack: config => {
// gzip压缩
config.plugins.push(
new CompressionWebpackPlugin({
test: /.js$|.html$|.css$/,
threshold: 4096 // 超过4kb压缩
})
);
// html加入script引入,文件中去掉import Vue 等,使用时添加window
// config["externals"] = {
// vue: "Vue",
// "vue-router": "VueRouter",
// vuex: "Vuex",
// "vue-clipboard2": "VueClipboard"
// };
if (process.env.VUE_APP_MODE == "发布") {
// 打包生成release包
var path = "./Releases/pwa-dist-" + formatTime() + ".zip";
config.plugins.push(
new FileManagerPlugin({
events: {
onEnd: {
archive: [{ source: "./pwa-dist", destination: path }]
}
}
})
);
}
},
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete("prefetch");
config.plugins.delete("prefetch-index").delete("preload-index");
config.entry("main").add("babel-polyfill");
// 图片转base64
config.module
.rule("images")
.use("url-loader")
.loader("url-loader")
.tap(options => Object.assign(options, { limit: 2000000 }));
// 配置打包上线代码去console
// if (process.env.VUE_APP_MODE == "发布") {
config.optimization.minimizer("terser").tap(args => {
args[0].terserOptions.compress.drop_console = true;
args[0].terserOptions.compress.pure_funcs = ["console.log"];
args[0].terserOptions.output = { comments: false };
return args;
});
// 分割 chunk-vendors
config.optimization.splitChunks({
chunks: "all",
cacheGroups: {
libs: {
name: "chunk-libs",
test: /[/]node_modules[/]/,
priority: 10,
chunks: "initial"
},
vantUI: {
name: "chunk-vantUI",
priority: 20, // 优先级 20
test: /[/]node_modules[/]_?vant(.*)/
}
}
});
// }
return config;
}
};
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147