Config
coderljw 2024-10-13 大约 2 分钟
# 1. index.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>logo.png" />
<title>Ant Design Pro</title>
<style></style>
<!-- 引入CSS的CDN资源 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
</head>
<body>
<noscript>
<strong
>非常抱歉！您的浏览器暂不支持JavaScript，请升级您的浏览器！</strong
>
</noscript>
<div id="app"></div>
<!-- 引入JS的CDN资源 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script
type="text/javascript"
src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"
></script>
<% } %>
</body>
</html>
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
# 2. vue.config.js
const path = require('path')
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin
const CompressionPlugin = require('compression-webpack-plugin')
// 设置别名
const resolve = dir => path.join(__dirname, dir)
const isProd = process.env.NODE_ENV === 'production'
// CDN资源
const assetsCDN = {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
},
css: [],
js: [
'//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
'//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
'//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
'//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js',
],
}
// 生产模式插件
let plugins = [
// 忽略moment.js的所有语言环境文件（减小打包体积）
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 打包文件可视化分析
new BundleAnalyzerPlugin(),
// GZip压缩
new CompressionPlugin({
test: /\.(js|css)(\?.*)?$/i, // 需要压缩的文件类型
threshold: 10240, // 文件大于10k时启用压缩
deleteOriginalAssets: false, // 压缩后保留原文件
}),
]
// 添加生产模式插件
if (isProd) plugins = [...plugins]
const vueConfig = {
// 发布路径修改
publicPath: './',
configureWebpack: {
plugins,
externals: isProd ? assetsCDN.externals : {},
},
chainWebpack: config => {
config.resolve.alias.set('@$', resolve('src'))
// 使用icon、svg图片
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.oneOf('inline')
.resourceQuery(/inline/)
.use('vue-svg-icon-loader')
.loader('vue-svg-icon-loader')
.end()
.end()
.oneOf('external')
.use('file-loader')
.loader('file-loader')
.options({
name: 'assets/[name].[hash:8].[ext]',
})
if (isProd)
config.plugin('html').tap(args => ((args[0].cdn = assetsCDN), args))
},
css: {
loaderOptions: {
// 设置less共享全局变量
less: {
globalVars: {
primary: '#fff',
},
},
},
},
// 开发模式
devServer: {
disableHostCheck: true, // 可防止热更新失效
port: 7777, // 设置服务端口
proxy: {
// 要代理的请求路径
'/agency': {
target: 'http://www.coderljw.ga:4396', // 要跨域的域名（后端目标接口地址）
changeOrigin: true, // 是否开启跨域
ws: false, // 不开启websocket代理
pathRewrite: {
'^/agency': '', // 将/agency替换成''
},
},
},
},
// 生产模式关闭SourceMap
productionSourceMap: false,
// 开发模式关闭保存eslint代码检测
lintOnSave: false,
}
module.exports = vueConfig
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
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
# 3. babel.config.js
const productionPlugin = []
if (process.env.NODE_ENV === 'production')
productionPlugin.push('transform-remove-console')
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'], // 进度条
plugins: [
[
'component',
{
libraryName: 'element-ui', // element插件
styleLibraryName: 'theme-chalk', // element样式插件
},
],
// 添加插件
...productionPlugin,
],
}
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
# 4. postcssrc.js
module.exports = {
plugins: {
// 将px转换为rem，内联样式不可转
'postcss-pxtorem': {
// 如果是vant组件，1rem = 37.5px，反之 1rem = 75px (设计稿的十分之一)
rootValue({ file }) {
return file.includes('vant') ? 37.5 : 75
},
// 转换所有属性
propList: ['*'],
},
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 5. .prettierrc
{
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true,
"semi": false,
"arrowParens": "avoid",
"jsxSingleQuote": true,
"trailingComma": "none"
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
