定制app开发首先我们需要在根目录定制app开发里创建一个vue.config.js
定制app开发首先在文件中先写入
//定制app开发打包配置文件module.exports = { assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏） productionSourceMap: false, //不输出map文件};- 1
- 2
- 3
- 4
- 5
- 6
之后再使用CDN 加速优化(此代码在module.exports对象外面)
cdn加速可以去官网找到相应插件的路径
// 是否为生产环境const isProduction = process.env.NODE_ENV !== 'development';// 本地环境是否需要使用cdnconst devNeedCdn = false// cdn链接const cdn = { // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称） externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios', 'element-ui': 'ELEMENT' //这里需要注意下 }, // cdn的css链接 css: [ 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' //引入element ui css文件 ], // cdn的js链接 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.min.js', 'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js', 'https://cdn.bootcss.com/axios/0.27.2/axios.min.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.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
在module.exports对象里写入
chainWebpack: config => { // ============注入cdn start============ config.plugin('html').tap(args => { // 生产环境或本地需要cdn时，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
对图片文件进行压缩
下载依赖 这里如果用npm 可能会下载速度慢安装失败，建议使用
cnpm install image-webpack-loader --save-dev- 1
之后继续在 chainWebpack里面新增以下代码
config.plugins.delete('prefetch') config.module.rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true })- 1
- 2
- 3
- 4
- 5
- 6
对代码压缩
先下载依赖 也建议使用cnpm
cnpm install uglifyjs-webpack-plugin --save-dev- 1
在module.exports对象里写入
configureWebpack: config => { if (isProduction || devNeedCdn) config.externals = cdn.externals // 代码压缩 config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { //生产环境自动删除console compress: { drop_debugger: true, drop_console: true, pure_funcs: ['console.log'] } }, sourceMap: false, parallel: true }) ) },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
对公共代码抽离
在configureWebpack里继续写入
// 公共代码抽离 config.optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 60 }, styles: { name: 'styles', test: /\.(sa|sc|c)ss$/, chunks: 'all', enforce: true }, runtimeChunk: { name: 'manifest' } } } }- 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
最后整合起来vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')// 是否为生产环境const isProduction = process.env.NODE_ENV !== 'development';// 本地环境是否需要使用cdnconst devNeedCdn = false// cdn链接const cdn = { // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称） externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios' }, // cdn的css链接 css: [ ], // cdn的js链接 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.min.js', 'https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js', 'https://cdn.bootcss.com/axios/0.27.2/axios.min.js', 'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.min.js' ]}//打包配置文件module.exports = { assetsDir: 'static', publicPath: './', productionSourceMap: false, //不输出map文件 chainWebpack: config => { // ============注入cdn start============ config.plugin('html').tap(args => { // 生产环境或本地需要cdn时，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ // 在chainWebpack中新增以下代码 config.plugins.delete('prefetch') config.module.rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) }, configureWebpack: config => { if (isProduction || devNeedCdn) config.externals = cdn.externals // 代码压缩 config.plugins.push( new UglifyJsPlugin({ uglifyOptions: { //生产环境自动删除console compress: { drop_debugger: true, drop_console: true, pure_funcs: ['console.log'] } }, sourceMap: false, parallel: true }) ) // 公共代码抽离 config.optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 60 }, styles: { name: 'styles', test: /\.(sa|sc|c)ss$/, chunks: 'all', enforce: true }, runtimeChunk: { name: 'manifest' } } } } }, devServer: { proxy: { '/api': { target: '线上接口地址', ws: true, changeOrigin: true, pathRewrite: { '^/api': '/', // 根据之前vuejs的配置，用来拿掉URL上的（/api），但是暂时没有什么效果 }, }, }, },};- 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