|
1 | | -const path = require('path') |
2 | | -const webpack = require('webpack') |
3 | | -const createThemeColorReplacerPlugin = require('./config/plugin.config') |
4 | | -const projectConfig = require('./src/config/projectConfig') |
5 | | - |
6 | | -const { defineConfig } = require("@vue/cli-service"); |
7 | | - |
8 | | -// 预览环境的服务端地址，没有启动后端时，可以通过此地址进行前端查看 |
9 | | -// const serverAddress = 'http://admin.ballcat.cn' |
10 | | -// const serverAddress = 'http://ballcat-admin:8080' |
11 | | -const serverAddress = 'http://localhost:8080' |
12 | | - |
13 | | -function resolve(dir) { |
14 | | - return path.join(__dirname, dir) |
15 | | -} |
16 | | - |
17 | | -/** |
18 | | - * 判断当前是否是生产环境 |
19 | | - * @returns {boolean} |
20 | | - */ |
21 | | -function isProd() { |
22 | | - return process.env.NODE_ENV === 'production' |
23 | | -} |
24 | | - |
25 | | -// 页面标题 |
26 | | -const name = projectConfig.projectTitle |
27 | | - |
28 | | - |
29 | | -// cdn 前缀，免费的 cdn 有 unpkg 和 jsdelivr |
30 | | -// 注意：免费 cdn 不稳定，建议生成使用付费 cdn，或者使用 oss 地址 |
31 | | -const cndPrefix = 'unpkg.com' |
32 | | -// const cndPrefix = 'cdn.jsdelivr.net/npm' |
33 | | - |
34 | | -const assetsCDN = { |
35 | | - css: [], |
36 | | - // https://unpkg.com/browse/[email protected]/ |
37 | | - js: [ |
38 | | - `//${cndPrefix}/[email protected]/dist/vue.min.js`, |
39 | | - `//${cndPrefix}/[email protected]/dist/vue-router.min.js`, |
40 | | - `//${cndPrefix}/[email protected]/dist/vuex.min.js`, |
41 | | - `//${cndPrefix}/[email protected]/dist/axios.min.js` |
42 | | - ] |
43 | | -} |
44 | | - |
45 | | -// webpack build externals |
46 | | -const prodExternals = { |
47 | | - vue: 'Vue', |
48 | | - 'vue-router': 'VueRouter', |
49 | | - vuex: 'Vuex', |
50 | | - axios: 'axios' |
51 | | -} |
52 | | - |
53 | | -// vue.config.js |
54 | | -const vueConfig = { |
55 | | - configureWebpack: { |
56 | | - // provide the app's title in webpack's name field, so that |
57 | | - // it can be accessed in index.html to inject the correct title. |
58 | | - name: name, |
59 | | - // webpack plugins |
60 | | - plugins: [ |
61 | | - // Ignore all locale files of moment.js |
62 | | - new webpack.IgnorePlugin({ |
63 | | - resourceRegExp: /^\.\/locale$/, |
64 | | - contextRegExp: /moment$/, |
65 | | - }) |
66 | | - ], |
67 | | - // if prod is on, add externals |
68 | | - externals: isProd() ? prodExternals : {} |
69 | | - }, |
70 | | - |
71 | | - chainWebpack: (config) => { |
72 | | - // it can improve the speed of the first screen, it is recommended to turn on preload |
73 | | - // config.plugin('preload').tap(() => [ |
74 | | - // { |
75 | | - // rel: 'preload', |
76 | | - // // to ignore runtime.js |
77 | | - // // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171 |
78 | | - // fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], |
79 | | - // include: 'initial' |
80 | | - // } |
81 | | - // ]) |
82 | | - |
83 | | - // when there are many pages, it will cause too many meaningless requests |
84 | | - config.plugins.delete('prefetch') |
85 | | - |
86 | | - |
87 | | - config.resolve.alias |
88 | | - .set('@$', resolve('src')) |
89 | | - |
90 | | - const svgRule = config.module.rule('svg') |
91 | | - svgRule.uses.clear() |
92 | | - |
93 | | - // https://github.com/vuejs/vue-cli/issues/6785 |
94 | | - svgRule.delete('type'); |
95 | | - svgRule.delete('generator'); |
96 | | - svgRule |
97 | | - .use('vue-loader') |
98 | | - .loader('vue-loader') |
99 | | - .end() |
100 | | - .use('vue-svg-loader') |
101 | | - .loader('vue-svg-loader'); |
102 | | - |
103 | | - |
104 | | - // if prod is on |
105 | | - // assets require on cdn |
106 | | - if (isProd()) { |
107 | | - config.plugin('html').tap(args => { |
108 | | - args[0].cdn = assetsCDN |
109 | | - return args |
110 | | - }) |
111 | | - |
112 | | - // 内联 Manifest |
113 | | - // config |
114 | | - // .plugin('ScriptExtHtmlWebpackPlugin') |
115 | | - // .after('html') |
116 | | - // .use('script-ext-html-webpack-plugin', [{ |
117 | | - // // `runtime` must same as runtimeChunk name. default is `runtime` |
118 | | - // inline: /runtime\..*\.js$/ |
119 | | - // }]) |
120 | | - // .end() |
121 | | - |
122 | | - config.optimization.splitChunks({ |
123 | | - chunks: 'all', |
124 | | - cacheGroups: { |
125 | | - libs: { |
126 | | - name: 'chunk-libs', |
127 | | - test: /[\\/]node_modules[\\/]/, |
128 | | - priority: 10, |
129 | | - chunks: 'initial' // 只打包初始时依赖的第三方 |
130 | | - }, |
131 | | - antDesignVue: { |
132 | | - name: 'chunk-AntDesignVue', // 单独将 AntDesignVue 拆包 |
133 | | - priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app |
134 | | - test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/ |
135 | | - }, |
136 | | - commons: { |
137 | | - name: 'chunk-commons', |
138 | | - test: resolve('src/components'), // 可自定义拓展你的规则 |
139 | | - minChunks: 3, // // 最小共用次数 |
140 | | - priority: 5, |
141 | | - reuseExistingChunk: true |
142 | | - } |
143 | | - } |
144 | | - }) |
145 | | - // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk |
146 | | - config.optimization.runtimeChunk('single') |
147 | | - } |
148 | | - }, |
149 | | - |
150 | | - css: { |
151 | | - loaderOptions: { |
152 | | - less: { |
153 | | - lessOptions: { |
154 | | - modifyVars: { |
155 | | - // less vars，customize ant design theme |
156 | | - // 'primary-color': '#F5222D', |
157 | | - // 'link-color': '#F5222D', |
158 | | - 'text-color': 'rgba(0, 0, 0, 0.85)', // 主文本色 |
159 | | - 'border-radius-base': '2px', // 按钮圆角 |
160 | | - 'layout-header-height': '48px', // layout 头高度 |
161 | | - 'menu-collapsed-width': '48px' // inline 菜单收起宽度 |
162 | | - }, |
163 | | - javascriptEnabled: true, |
164 | | - // 兼容 less3 到 less4 的语法变动问题 https://github.com/vueComponent/ant-design-vue/issues/3665 |
165 | | - math: 'always' |
166 | | - } |
167 | | - } |
168 | | - } |
169 | | - }, |
170 | | - |
171 | | - devServer: { |
172 | | - // development server port 8000 |
173 | | - port: 8000, |
174 | | - // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11 |
175 | | - proxy: { |
176 | | - '^/api': { |
177 | | - target: serverAddress, |
178 | | - changeOrigin: true, |
179 | | - ws: true, |
180 | | - pathRewrite: { |
181 | | - '^/api': '/' |
182 | | - } |
183 | | - } |
184 | | - } |
185 | | - }, |
186 | | - |
187 | | - // disable source map in production |
188 | | - productionSourceMap: false, |
189 | | - lintOnSave: !isProd(), |
190 | | - // babel-loader no-ignore node_modules/* |
191 | | - transpileDependencies: true |
192 | | -} |
193 | | - |
194 | | -if (projectConfig.enableLayoutSetting) { |
195 | | - // add `ThemeColorReplacer` plugin to webpack plugins |
196 | | - vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin()) |
197 | | -} |
198 | | - |
199 | | -module.exports = defineConfig(vueConfig) |
| 1 | +const path = require('path') |
| 2 | +const webpack = require('webpack') |
| 3 | +const createThemeColorReplacerPlugin = require('./config/plugin.config') |
| 4 | +const projectConfig = require('./src/config/projectConfig') |
| 5 | + |
| 6 | +const { defineConfig } = require("@vue/cli-service"); |
| 7 | + |
| 8 | +// 预览环境的服务端地址，没有启动后端时，可以通过此地址进行前端查看 |
| 9 | +// const serverAddress = 'http://admin.ballcat.cn' |
| 10 | +// const serverAddress = 'http://ballcat-admin:8080' |
| 11 | +const serverAddress = 'https://localhost:8080' |
| 12 | + |
| 13 | +function resolve(dir) { |
| 14 | + return path.join(__dirname, dir) |
| 15 | +} |
| 16 | + |
| 17 | +/** |
| 18 | + * 判断当前是否是生产环境 |
| 19 | + * @returns {boolean} |
| 20 | + */ |
| 21 | +function isProd() { |
| 22 | + return process.env.NODE_ENV === 'production' |
| 23 | +} |
| 24 | + |
| 25 | +// 页面标题 |
| 26 | +const name = projectConfig.projectTitle |
| 27 | + |
| 28 | + |
| 29 | +// cdn 前缀，免费的 cdn 有 unpkg 和 jsdelivr |
| 30 | +// 注意：免费 cdn 不稳定，建议生成使用付费 cdn，或者使用 oss 地址 |
| 31 | +const cndPrefix = 'unpkg.com' |
| 32 | +// const cndPrefix = 'cdn.jsdelivr.net/npm' |
| 33 | + |
| 34 | +const assetsCDN = { |
| 35 | + css: [], |
| 36 | + // https://unpkg.com/browse/[email protected]/ |
| 37 | + js: [ |
| 38 | + `//${cndPrefix}/[email protected]/dist/vue.min.js`, |
| 39 | + `//${cndPrefix}/[email protected]/dist/vue-router.min.js`, |
| 40 | + `//${cndPrefix}/[email protected]/dist/vuex.min.js`, |
| 41 | + `//${cndPrefix}/[email protected]/dist/axios.min.js` |
| 42 | + ] |
| 43 | +} |
| 44 | + |
| 45 | +// webpack build externals |
| 46 | +const prodExternals = { |
| 47 | + vue: 'Vue', |
| 48 | + 'vue-router': 'VueRouter', |
| 49 | + vuex: 'Vuex', |
| 50 | + axios: 'axios' |
| 51 | +} |
| 52 | + |
| 53 | +// vue.config.js |
| 54 | +const vueConfig = { |
| 55 | + configureWebpack: { |
| 56 | + // provide the app's title in webpack's name field, so that |
| 57 | + // it can be accessed in index.html to inject the correct title. |
| 58 | + name: name, |
| 59 | + // webpack plugins |
| 60 | + plugins: [ |
| 61 | + // Ignore all locale files of moment.js |
| 62 | + new webpack.IgnorePlugin({ |
| 63 | + resourceRegExp: /^\.\/locale$/, |
| 64 | + contextRegExp: /moment$/, |
| 65 | + }) |
| 66 | + ], |
| 67 | + // if prod is on, add externals |
| 68 | + externals: isProd() ? prodExternals : {} |
| 69 | + }, |
| 70 | + |
| 71 | + chainWebpack: (config) => { |
| 72 | + // it can improve the speed of the first screen, it is recommended to turn on preload |
| 73 | + // config.plugin('preload').tap(() => [ |
| 74 | + // { |
| 75 | + // rel: 'preload', |
| 76 | + // // to ignore runtime.js |
| 77 | + // // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171 |
| 78 | + // fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], |
| 79 | + // include: 'initial' |
| 80 | + // } |
| 81 | + // ]) |
| 82 | + |
| 83 | + // when there are many pages, it will cause too many meaningless requests |
| 84 | + config.plugins.delete('prefetch') |
| 85 | + |
| 86 | + |
| 87 | + config.resolve.alias |
| 88 | + .set('@$', resolve('src')) |
| 89 | + |
| 90 | + const svgRule = config.module.rule('svg') |
| 91 | + svgRule.uses.clear() |
| 92 | + |
| 93 | + // https://github.com/vuejs/vue-cli/issues/6785 |
| 94 | + svgRule.delete('type'); |
| 95 | + svgRule.delete('generator'); |
| 96 | + svgRule |
| 97 | + .use('vue-loader') |
| 98 | + .loader('vue-loader') |
| 99 | + .end() |
| 100 | + .use('vue-svg-loader') |
| 101 | + .loader('vue-svg-loader'); |
| 102 | + |
| 103 | + |
| 104 | + // if prod is on |
| 105 | + // assets require on cdn |
| 106 | + if (isProd()) { |
| 107 | + config.plugin('html').tap(args => { |
| 108 | + args[0].cdn = assetsCDN |
| 109 | + return args |
| 110 | + }) |
| 111 | + |
| 112 | + // 内联 Manifest |
| 113 | + // config |
| 114 | + // .plugin('ScriptExtHtmlWebpackPlugin') |
| 115 | + // .after('html') |
| 116 | + // .use('script-ext-html-webpack-plugin', [{ |
| 117 | + // // `runtime` must same as runtimeChunk name. default is `runtime` |
| 118 | + // inline: /runtime\..*\.js$/ |
| 119 | + // }]) |
| 120 | + // .end() |
| 121 | + |
| 122 | + config.optimization.splitChunks({ |
| 123 | + chunks: 'all', |
| 124 | + cacheGroups: { |
| 125 | + libs: { |
| 126 | + name: 'chunk-libs', |
| 127 | + test: /[\\/]node_modules[\\/]/, |
| 128 | + priority: 10, |
| 129 | + chunks: 'initial' // 只打包初始时依赖的第三方 |
| 130 | + }, |
| 131 | + antDesignVue: { |
| 132 | + name: 'chunk-AntDesignVue', // 单独将 AntDesignVue 拆包 |
| 133 | + priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app |
| 134 | + test: /[\\/]node_modules[\\/]_?ant-design-vue(.*)/ |
| 135 | + }, |
| 136 | + commons: { |
| 137 | + name: 'chunk-commons', |
| 138 | + test: resolve('src/components'), // 可自定义拓展你的规则 |
| 139 | + minChunks: 3, // // 最小共用次数 |
| 140 | + priority: 5, |
| 141 | + reuseExistingChunk: true |
| 142 | + } |
| 143 | + } |
| 144 | + }) |
| 145 | + // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk |
| 146 | + config.optimization.runtimeChunk('single') |
| 147 | + } |
| 148 | + }, |
| 149 | + |
| 150 | + css: { |
| 151 | + loaderOptions: { |
| 152 | + less: { |
| 153 | + lessOptions: { |
| 154 | + modifyVars: { |
| 155 | + // less vars，customize ant design theme |
| 156 | + // 'primary-color': '#F5222D', |
| 157 | + // 'link-color': '#F5222D', |
| 158 | + 'text-color': 'rgba(0, 0, 0, 0.85)', // 主文本色 |
| 159 | + 'border-radius-base': '2px', // 按钮圆角 |
| 160 | + 'layout-header-height': '48px', // layout 头高度 |
| 161 | + 'menu-collapsed-width': '48px' // inline 菜单收起宽度 |
| 162 | + }, |
| 163 | + javascriptEnabled: true, |
| 164 | + // 兼容 less3 到 less4 的语法变动问题 https://github.com/vueComponent/ant-design-vue/issues/3665 |
| 165 | + math: 'always' |
| 166 | + } |
| 167 | + } |
| 168 | + } |
| 169 | + }, |
| 170 | + |
| 171 | + devServer: { |
| 172 | + // development server port 8000 |
| 173 | + port: 8000, |
| 174 | + // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11 |
| 175 | + proxy: { |
| 176 | + '^/api': { |
| 177 | + target: serverAddress, |
| 178 | + changeOrigin: true, |
| 179 | + ws: true, |
| 180 | + pathRewrite: { |
| 181 | + '^/api': '/' |
| 182 | + } |
| 183 | + } |
| 184 | + } |
| 185 | + }, |
| 186 | + |
| 187 | + // disable source map in production |
| 188 | + productionSourceMap: false, |
| 189 | + lintOnSave: !isProd(), |
| 190 | + // babel-loader no-ignore node_modules/* |
| 191 | + transpileDependencies: true |
| 192 | +} |
| 193 | + |
| 194 | +if (projectConfig.enableLayoutSetting) { |
| 195 | + // add `ThemeColorReplacer` plugin to webpack plugins |
| 196 | + vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin()) |
| 197 | +} |
| 198 | + |
| 199 | +module.exports = defineConfig(vueConfig) |
0 commit comments