vue.config.js
5.3 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
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
148
'use strict'
const path = require('path')
const Timestamp = new Date().getTime();
function resolve (dir) {
return path.join(__dirname, dir)
}
const port = process.env.port || process.env.npm_config_port || 8888 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
// 加载资源的路径
publicPath: '/dj/',
// 设置项目打包生成的文件的存储目录,可以是静态路径也可以是相对路径
outputDir: 'dist',
// 设置放置打包生成的静态资源 (js、css、img、fonts) 的目录
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
filenameHashing: false,
// webpack开发服务器
devServer: {
hot: true,
port: port,
open: true,
disableHostCheck: true,
host: "0.0.0.0",
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: process.env.VUE_APP_API_BASE_URL,//本机服务
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
css: {
extract: true, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps?
loaderOptions: {
sass: {
prependData: `@import "@/styles/variables.scss";`
}
},
modules: false,
},
// configureWebpack通过操作对象的形式,来修改默认的webpack配置
configureWebpack: {
optimization: {
usedExports: true,
minimize: true
},
entry: {
app: './src/main.js'
},
externals: [{
'./cptable': 'var cptable'
}],
resolve: {
alias: {
'@': resolve('src')
}
},
output: {
filename: `static/js/[name].[hash].js`,
chunkFilename: `static/js/[name].[hash].js`,
},
devtool: "source map"
},
// chainWebpack通过链式编程的形式,来修改默认的webpack配置
chainWebpack (config) {
// it can improve the speed of the first screen, it is recommended to turn on preload
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 meaningscss requests
config.plugins.delete('prefetch')
config.module
.rule('svg')
.exclude.add(resolve('src/image/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/image/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`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
},
elementUI: {
name: 'chunk-elementUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3,
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
)
}
}