140 lines
3.4 KiB
JavaScript
140 lines
3.4 KiB
JavaScript
const { defineConfig } = require('@vue/cli-service')
|
||
const path = require('path');
|
||
const CompressionPlugin = require('compression-webpack-plugin')
|
||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||
|
||
let cdn = {
|
||
css: [
|
||
'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'
|
||
],
|
||
js: [
|
||
'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
|
||
'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
|
||
// 'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
|
||
'https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js',
|
||
'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
|
||
]
|
||
}
|
||
|
||
module.exports = defineConfig({
|
||
transpileDependencies: true,
|
||
publicPath: './',
|
||
productionSourceMap: false,
|
||
devServer: {
|
||
|
||
hot: false,
|
||
compress: true,
|
||
open: false,
|
||
client: {
|
||
overlay: {
|
||
errors: true,
|
||
warnings: false,
|
||
},
|
||
},
|
||
// proxy: {
|
||
// '/api': {
|
||
// target: 'http://115.159.153.142:9010/h5',
|
||
// changeOrigin: true,
|
||
// ws: true,
|
||
// pathRewrite: {
|
||
// '^/api': ''
|
||
// }
|
||
// }
|
||
// }
|
||
},
|
||
chainWebpack: config => {
|
||
if (process.env.NODE_ENV === 'production') {
|
||
// 生产环境下注入一个变量cdn 变量可以在html中通过htmlWebpackPlugin.options进行获取
|
||
config.plugin('html')
|
||
.tap(args => {
|
||
args[0].cdn = cdn;
|
||
return args;
|
||
})
|
||
}
|
||
|
||
// 移除 prefetch 插件
|
||
config.plugins.delete('prefetch')
|
||
config.plugins.delete('preload')
|
||
|
||
|
||
// 配置别名
|
||
config.resolve.alias
|
||
//第一个参数：别名 第二个参数：路径
|
||
.set('@',resolve('src'))
|
||
.set('@less',resolve('src/assets/less'))
|
||
.set('@page',resolve('src/assets/less/page'))
|
||
|
||
|
||
// 配置 less 的自动导入
|
||
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
|
||
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
|
||
|
||
|
||
},
|
||
configureWebpack: config => {
|
||
// 正式阶段，项目打包上线的优化措施
|
||
if (process.env.NODE_ENV === 'production') {
|
||
|
||
/**
|
||
* 去除这些公共包，让webpack不打包到项目源码的js中，减小项目js体积
|
||
* 然后使用 pages 节点下的 cdn 数组里面的资源外链来引入。
|
||
*/
|
||
config.externals = {
|
||
vue: 'Vue',
|
||
'vue-router': 'VueRouter',
|
||
axios: 'axios',
|
||
Vant: 'Vant'
|
||
};
|
||
|
||
|
||
/**
|
||
* 部署阶段 代码压缩
|
||
*/
|
||
config.plugins.push(
|
||
// 生产环境自动删除console
|
||
new UglifyJsPlugin({
|
||
uglifyOptions: {
|
||
warnings: false,
|
||
compress: {
|
||
drop_debugger: true,
|
||
drop_console: true
|
||
}
|
||
},
|
||
sourceMap: false,
|
||
parallel: true
|
||
})
|
||
);
|
||
|
||
|
||
/**
|
||
* Gzip压缩
|
||
*/
|
||
return {
|
||
plugins: [new CompressionPlugin({
|
||
test: /\.js$|\.html$|\.css/, //匹配文件名
|
||
threshold: 10240, //对超过10k的数据进行压缩
|
||
deleteOriginalAssets: false //是否删除原文件
|
||
})]
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
})
|
||
|
||
|
||
function resolve(dir) {
|
||
return path.join(__dirname,dir)
|
||
}
|
||
|
||
|
||
function addStyleResource (rule) {
|
||
rule.use('style-resource')
|
||
.loader('style-resources-loader')
|
||
.options({
|
||
patterns: [
|
||
path.resolve(__dirname, './src/assets/less/_.less'),
|
||
],
|
||
})
|
||
}
|