打包配置
# 打包配置
注意：新版 vue-admin-better 为了便于静态演示，所以打包时默认集成了 mock，如果不需要请找到src/main.js注释掉 mock 引入
# 如何打包
注意：打包前，务必配置打包后的要调用的 api 接口地址已经配置成功，在src/config/settings.js中配置，一般打包部署分为三种种情况：
1、nigix 代理：那你只要在src/config/settings.js配置接口后缀就可以啦，通过 nginx 代理转发
2、传统前后端分离部署：那你需要在src/config/settings.js配置接口地址包含请求协议与端口号，如http://192.168.1.59:8080/api
3、前后端部署到一起：那你需要在src/config/settings.js配置接口地址为空即可，如``
cnpm run build
1
# 修复 vue/cli4 热更新失效
module.exports = {
chainWebpack(config) {
config.resolve.symlinks(true);
},
};
1
2
3
4
5
2
3
4
5
# 开启 gzip 压缩
cnpm i -S compression-webpack-plugin
1
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["html", "js", "css", "svg"];
module.exports = {
chainWebpack(config) {
config
.plugin("compression")
.use(CompressionWebpackPlugin, [
{
filename: "[path].gz[query]",
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 8192,
minRatio: 0.8,
},
])
.end();
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 开启 Zopfli 压缩
cnpm i -S compression-webpack-plugin @gfx/zopfli brotli-webpack-plugin
1
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const BrotliPlugin = require("brotli-webpack-plugin");
const zopfli = require("@gfx/zopfli");
const productionGzipExtensions = ["html", "js", "css", "svg"];
module.exports = {
chainWebpack(config) {
config
.plugin("compression")
.use(CompressionWebpackPlugin, [
{
algorithm(input, compressionOptions, callback) {
return zopfli.gzip(input, compressionOptions, callback);
},
compressionOptions: {
numiterations: 15,
},
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
minRatio: 0.8,
},
])
.end();
config
.plugin("brotli")
.use(BrotliPlugin, [
{
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
minRatio: 0.8,
},
])
.end();
},
};
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
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
# 注入 sass 全局变量
module.exports = {
css: {
requireModuleExtension: true,
sourceMap: true,
loaderOptions: {
scss: {
/*sass-loader 7.0写法 */
//data: '@import "~@/styles/variables.scss";',
/*sass-loader 8.0写法 */
//prependData: '@import "~@/styles/variables.scss";',
/*sass-loader 9.0写法*/
additionalData(content, loaderContext) {
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);
if (
relativePath.replace(/\\/g, "/") !== "src/styles/variables.scss"
) {
return '@import "~@/styles/variables.scss";' + content;
}
return content;
},
},
},
},
};
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
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
# 开启 eslint 自动校验
module.exports = {
lintOnSave: true,
};
1
2
3
2
3
# 关于图片存放位置的问题
module.exports = {
assetsDir: "static",
};
1
2
3
2
3
不要看网上乱七八糟的教程，把项目用的所有图片都放到src/assets文件夹下，图片引用直接require("@/assets/文件夹/图片")即可，图片会自动加密并编译到 static 目录，信群主，得永生。