配置兩個文件:
- vue.config.js 配置 cdn & zip
- public/index.html 配置
1. vue.config.js 配置(可直接複製)
出處:https://c.lanmit.com/Webqianduan/JavaScript/55401.html
注意事項:
const path = require('path')
const resolve = (dir) => path.resolve(__dirname, dir);
// 是否爲生產環境
const isProduction = process.env.NODE_ENV !== 'development'
console.log('isProductionisProduction', process.env.NODE_ENV)
// gzip壓縮
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const Proxy = {
'/api': {
// 代理地址
target: 'http://172.16.8.44:8086',
changeOrigin: true, // 是否跨域
secure: false,
pathRewrite: {
'^/api': '/api/ctrl', //測試環境
// '/api': '', //需要rewrite重寫的, //本地聯調
}
}
}
const cdn = {
// 忽略打包的第三方庫
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT',
},
// 通過cdn方式使用
js: [
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js'
],
css: [
'https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css'
]
}
module.exports = {
publicPath: '/',
outputDir: 'dist',
lintOnSave: false,
runtimeCompiler: false, //是否使用包含運行時編譯器的 Vue 構建版本
productionSourceMap: false, //生產環境是否生成 sourceMap 文件
integrity: false, //生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標籤上啓用 Subresource Integrity (SRI)
// webpack相關配置
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('common', resolve('src/common'))
.set('assets', resolve('src/assets'))
.set('router', 'src/router')
.set('store', 'src/store')
.set('components', resolve('src/components'))
.set('views', resolve('src/views'))
.set('i18n', resolve('src/i18n'))
.set('config', resolve('src/config'))
// 移除 prefetch 插件
config.plugins.delete('prefetch-index');
// 移除 preload 插件,避免加載多餘的資源
config.plugins.delete('preload-index');
// 配置cdn引入
config.plugin('html').tap((args) => {
args[0].cdn = cdn;
return args
})
},
configureWebpack: config => {
// 忽略打包配置
config.externals = cdn.externals
if (isProduction) {
// 生產環境
//gzip壓縮
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
// eslint-disable-next-line no-useless-escape
test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240, // 只有大小大於該值的資源會被處理 10240
minRatio: 0.8, // 只有壓縮率小於這個值的資源纔會被處理
deleteOriginalAssets: false, // 刪除原文件
})
)
// 公共代碼抽離
config.optimization = {
// 分割代碼塊 chunk
splitChunks: {
cacheGroups: {
//公用模塊抽離
common: {
chunks: 'initial',
minSize: 0, //大於0個字節
minChunks: 2, //抽離公共代碼時,這個代碼塊最小被引用的次數
},
//第三方庫抽離
vendor: {
priority: 1, //權重
test: /node_modules/,
chunks: 'initial',
minSize: 0, //大於0個字節
minChunks: 2, //在分割之前,這個代碼塊最小應該被引用的次數
},
}
}
}
}
else {
// 開發環境
// config.mode = 'development';
}
},
devServer: {
overlay: {
warnings: false,
errors: false,
},
open: true,
host: '0.0.0.0',
port: 8701,
https: false,
hotOnly: true,
proxy: Proxy
},
css: {
extract: true,
sourceMap: false,
// css預設器配置項
loaderOptions: {
sass: {
prependData: `@import "@/common/style/_variable.scss";`
}
},
},
// 第三方插件配置
pluginOptions: {}
}
2. index.html 配置(可直接複製)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="x-dns-prefetch-control" content="on"/>
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title></title>
<script src="libs/flexible.js"></script>
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
</head>
<body>
<noscript>
<strong>很抱歉,沒有啓用JavaScript, 本服務無法正常工作!</strong>
</noscript>
<div id="app"></div>
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
— end