-
Notifications
You must be signed in to change notification settings - Fork 0
/
vue.config.js
142 lines (136 loc) · 4.38 KB
/
vue.config.js
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
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const port = process.env.port || process.env.npm_config_port || 8087
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/vue-app/' : '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
devServer: {
port: port,
overlay: {
warnings: true,
errors: true
},
// before方法:能够在其他所有的中间件之前执行自定义的中间件
before: require('./mock/mock-server.js'),
// proxy: {
// '/dev-api': {
// target: '1.1.1.1',
// changeOrigin: true,
// ws: true,
// pathRewrite: {
// '^/dev-api/': ''
// }
// }
// }
},
configureWebpack: {
name: resolve('package.json'),
resolve: {
alias: {
'@': resolve('src')
}
},
performance: {
hints: 'warning',
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
// 只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js')
}
}
},
chainWebpack(config) {
// 它可以提高第一屏的速度,建议打开预加载
config.plugin('preload').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
// 当有很多页面时,会导致太多无意义的请求
// when there are many pages, it will cause too many meaningless requests
config.plugins.delete('prefetch')
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
// `runtime`必须与runtimeChunk名称相同。默认值为`runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // 仅包装最初依赖的第三方
},
mintUI: {
name: 'chunk-mintUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?mint-ui(.*)/
},
// elementUI: {
// name: 'chunk-elementUI', // split elementUI into a single package 将elementUI拆分为单个包
// priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app 权重需要大于libs和app,否则将打包成libs或app
// test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm 为了适应cnpm
// },
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules 可以自定义您的规则
minChunks: 3, // minimum common number 最小公数
priority: 5,
reuseExistingChunk: true
}
}
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}
)
},
css: {
// 启用 CSS modules
requireModuleExtension: true,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {}
}
}