|
|
@@ -10,69 +10,108 @@ function resolve(dir) {
|
|
|
}
|
|
|
|
|
|
|
|
|
-const port = process.env.port || process.env.npm_config_port || 8080
|
|
|
+// If your port is set to 80,
|
|
|
+// use administrator privileges to execute the command line.
|
|
|
+// For example, Mac: sudo npm run
|
|
|
+// You can change the port by the following method:
|
|
|
+// port = 8080 npm run dev OR npm run dev --port = 8080
|
|
|
+const port = process.env.port || process.env.npm_config_port || 8080 // 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: '/',
|
|
|
outputDir: 'dist',
|
|
|
assetsDir: 'static',
|
|
|
- lintOnSave: false,
|
|
|
+ lintOnSave: false,//process.env.NODE_ENV === 'development'
|
|
|
productionSourceMap: false,
|
|
|
devServer: {
|
|
|
+ // proxy: {
|
|
|
+ // "/admin": {
|
|
|
+ // target: process.env.NODE_ENV,
|
|
|
+ // ws: true,
|
|
|
+ // secure: false, // 如果是https接口，需要配置这个参数
|
|
|
+ // changeOrigin: true, // 是否跨域
|
|
|
+ // // pathRewrite: {
|
|
|
+ // // // 路径重写
|
|
|
+ // // "/admin": "/admin" // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
|
|
|
+ // // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
port: port,
|
|
|
open: true,
|
|
|
overlay: {
|
|
|
warnings: false,
|
|
|
errors: true
|
|
|
},
|
|
|
+ // before: require('./mock/mock-server.js')
|
|
|
},
|
|
|
configureWebpack: config => {
|
|
|
// 入口文件
|
|
|
config.entry.app = ["babel-polyfill", "./src/main.js"];
|
|
|
config.externals = {
|
|
|
- 'vue': 'Vue',
|
|
|
- axios: "axios",
|
|
|
- 'vue-router': 'VueRouter'
|
|
|
+ 'vue': 'Vue',
|
|
|
+ // 'vuex': 'Vuex',
|
|
|
+ axios: "axios",
|
|
|
+ 'vue-router': 'VueRouter'
|
|
|
};
|
|
|
- // if (isProduction) {
|
|
|
- config.plugins.push(new CompressionWebpackPlugin({
|
|
|
- algorithm: 'gzip',
|
|
|
- test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
|
|
|
- threshold: 10240,
|
|
|
- minRatio: 0.7
|
|
|
- }))
|
|
|
- // }
|
|
|
+ if (isProduction) {
|
|
|
+ config.plugins.push(new CompressionWebpackPlugin({
|
|
|
+ algorithm: 'gzip',
|
|
|
+ test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
|
|
|
+ threshold: 10240,
|
|
|
+ // deleteOriginalAssets:true, //删除源文件，不建议
|
|
|
+ minRatio: 0.7
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ // 删除console插件
|
|
|
let plugins = [
|
|
|
- new UglifyJsPlugin({
|
|
|
- uglifyOptions: {
|
|
|
- compress: {
|
|
|
- drop_console: true,
|
|
|
- drop_debugger: true
|
|
|
- },
|
|
|
- output: {
|
|
|
- comments: true
|
|
|
- }
|
|
|
- },
|
|
|
- cache: true,
|
|
|
- sourceMap: false,
|
|
|
- parallel: true
|
|
|
- })
|
|
|
+ new UglifyJsPlugin({
|
|
|
+ uglifyOptions: {
|
|
|
+ compress: {
|
|
|
+ // warnings: false, // `warnings` is not a supported option
|
|
|
+ drop_console: true,
|
|
|
+ drop_debugger: true
|
|
|
+ },
|
|
|
+ output: {
|
|
|
+ // 去掉注释内容
|
|
|
+ comments: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cache: true, //启用/禁用文件缓存（类型可布尔也可是字符串）
|
|
|
+ sourceMap: false,
|
|
|
+ parallel: true
|
|
|
+ })
|
|
|
];
|
|
|
-
|
|
|
- // if (isProduction) {
|
|
|
- config.plugins = [...config.plugins, ...plugins];
|
|
|
- // }
|
|
|
- },
|
|
|
+ // 只有打包生产环境才需要将console删除
|
|
|
+ if (isProduction) {
|
|
|
+ config.plugins = [...config.plugins, ...plugins];
|
|
|
+ }
|
|
|
+},
|
|
|
|
|
|
chainWebpack(config) {
|
|
|
+ // it can improve the speed of the first screen, it is recommended to turn on preload
|
|
|
+ // 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 meaningless requests
|
|
|
config.plugins.delete('prefetch')
|
|
|
+
|
|
|
+ // set svg-sprite-loader
|
|
|
config.module
|
|
|
.rule('svg')
|
|
|
.exclude.add(resolve('src/icons'))
|
|
|
@@ -88,6 +127,7 @@ module.exports = {
|
|
|
symbolId: 'icon-[name]'
|
|
|
})
|
|
|
.end()
|
|
|
+//process.env.NODE_ENV !== 'development'
|
|
|
config
|
|
|
.when(true,
|
|
|
config => {
|
|
|
@@ -95,6 +135,7 @@ module.exports = {
|
|
|
.plugin('ScriptExtHtmlWebpackPlugin')
|
|
|
.after('html')
|
|
|
.use('script-ext-html-webpack-plugin', [{
|
|
|
+ // `runtime` must same as runtimeChunk name. default is `runtime`
|
|
|
inline: /runtime\..*\.js$/
|
|
|
}])
|
|
|
.end()
|
|
|
@@ -106,22 +147,23 @@ module.exports = {
|
|
|
name: 'chunk-libs',
|
|
|
test: /[\\/]node_modules[\\/]/,
|
|
|
priority: 10,
|
|
|
- chunks: 'initial'
|
|
|
+ chunks: 'initial' // only package third parties that are initially dependent
|
|
|
},
|
|
|
elementUI: {
|
|
|
- name: 'chunk-elementUI',
|
|
|
- priority: 20,
|
|
|
- test: /[\\/]node_modules[\\/]_?element-ui(.*)/
|
|
|
+ name: 'chunk-elementUI', // split elementUI into a single package
|
|
|
+ priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
|
|
|
+ test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
|
|
|
},
|
|
|
commons: {
|
|
|
name: 'chunk-commons',
|
|
|
- test: resolve('src/components'),
|
|
|
- minChunks: 3,
|
|
|
+ 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')
|
|
|
}
|
|
|
)
|
