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
| const path = require('path')
|
| // compression-webpack-plugin，添加压缩文件类型
| const CompressionWebpackPlugin = require('compression-webpack-plugin')
| const productionGzipExtensions = ['js', 'css']
| const isProd = process.env.NODE_ENV === 'production'
|
| function resolve(dir) {
| return path.join(__dirname, dir)
| }
|
| const assetsCDN = {
| externals: {
| vue: 'Vue',
|
| },
| css: [],
| js: [
| 'https://cdn.pickmall.cn/cdn/vue.min.js',
| ],
| }
|
| // vue.config.js
| const vueConfig = {
| // 公共路径(必须有的)
| publicPath: '/',
| // 输出文件目录
| outputDir: 'dist',
| // 静态资源存放的文件夹(相对于ouputDir)
| assetsDir: 'static',
| runtimeCompiler: false,
| devServer: {
| port: 8000,
| // proxy: {
| // //配置跨域
| // '/api': {
| // target: 'http://api.xxxx.com', // 后台接口域名
| // ws: false, //如果要代理 websockets，配置这个参数
| // secure: false, // 如果是https接口，需要配置这个参数
| // changeOrigin: true, //是否跨域
| // pathRewrite: {
| // '^/api': '/api',
| // },
| // },
| // },
| },
| configureWebpack: {
| // webpack plugins
| plugins: [
| // 配置大文件压缩相关参数
| new CompressionWebpackPlugin({
| filename: '[path][base].gz',
| algorithm: 'gzip',
| test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
| threshold: 10240,
| minRatio: 0.8,
| }),
| ],
|
| // if prod, add externals
| externals: isProd ? assetsCDN.externals : {},
| },
|
| chainWebpack: config => {
| config.resolve.alias.set('@', resolve('src'))
|
| 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 prod is on
| // assets require on cdn
| if (isProd) {
| config.plugin('html').tap(args => {
| args[0].cdn = assetsCDN
| return args
| })
| }
| },
| pluginOptions: {
| 'style-resources-loader': {
| preProcessor: 'less',
| patterns: [
| //全局加载 less 变量
| path.resolve(__dirname, './src/assets/css/variable.less'),
| ],
| },
| },
| css: {
| loaderOptions: {
| less: {
| lessOptions: {
| modifyVars: {},
| javascriptEnabled: true,
| },
| },
| },
| },
|
| // 是否为生产环境构建生成 source map？
| productionSourceMap: false,
| // lintOnSave: undefined,
| lintOnSave: false,
| // babel-loader no-ignore node_modules/*
| transpileDependencies: [],
| }
|
| module.exports = vueConfig
|
|
