vue config文件
配置全局cdn加速
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// "compression-webpack-plugin": "^5.0.2",
const cdnDependencies = require('./cdn')
const HtmlInjectConfigPlugin = require('./src/plugins/html-inject-config-plugin')
const { chain, set, each } = require('lodash')
//"lodash": "^4.17.21",
// const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //自定义输出css文件名
/* 是否启动Gzip */
const enableGzip = process.env.VUE_APP_GZ === 'true'
/* 是否启动CDN */
const enableCDN = process.env.VUE_APP_CDN === 'true'
/* ========= CDN 处理 ============= */
/* 设置不参与构建的库 */
const externals = {}
let cdn = {}
if (enableCDN) {
cdnDependencies.forEach(pkg => { externals[pkg.name] = pkg.library })
/* 引入文件的 cdn 链接 */
cdn = {
css: cdnDependencies.map(e => e.css).filter(e => e),
js: cdnDependencies.map(e => e.js).filter(e => e)
}
}
/* ============ CDN end========== */
const pages = undefined
module.exports = {
publicPath: './',
outputDir: 'dist',
productionSourceMap: false,
devServer: {
disableHostCheck: true,
proxy: {
// '/api2': {
// target: '',
// changeOrigin: true,
// ws: true,
// pathRewrite: {
// '^/api2': ''
// }
// },
'/api': {
target: '',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
lintOnSave: false, // 取消 eslint 验证
configureWebpack: config => {
const configNew = {}
configNew.externals = externals
if (enableGzip) {
configNew.plugins = [
// gzip
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false
}),
]
}
return configNew
},
//开启下面 可以自定义js文件名 css文件名
// configureWebpack: {
// output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.js】
// filename: `myjs/[name].js`,
// chunkFilename: `myjs/[name].js`,
// },
// plugins: [
// new MiniCssExtractPlugin({
// // 修改打包后css文件名
// filename: `mycss/[name].css`,
// chunkFilename: `mycss/[name].css`
// })
// ]
// },
chainWebpack: config => {
//开启下面 可以自定义img名字
// config.module
// .rule("images")
// .use("url-loader")
// .tap(options => {
// options.name = `myimg/[name].[ext]`;
// options.fallback = {
// loader: "file-loader",
// options: {
// name: `myimg/[name].[ext]`
// }
// };
// return options;
// })
const htmlPluginNames = chain(pages).keys().map(page => 'html-' + page).value()
const targetHtmlPluginNames = htmlPluginNames.length ? htmlPluginNames : ['html']
each(targetHtmlPluginNames, name => {
config.plugin(name).tap(options => {
set(options, '[0].cdn', cdn)
return options
})
})
// 在html文件注入配置文件
config.plugin('HtmlInjectCohtmlnfigPlugin').use(HtmlInjectConfigPlugin, ['./'])
}
}
cdn配置js
module.exports = [
{ name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' },
{ name: 'vant', library: 'vant', js: 'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js', css: 'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css' },
{ name: 'vuex', library: 'Vuex', js: 'https://cdn.jsdelivr.net/npm/vuex@3.2.0/dist/vuex.min.js', css: '' },
{ name: 'vue-router', library: 'VueRouter', js: 'https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js', css: '' },
{ name: 'qs', library: 'Qs', js: 'https://cdn.jsdelivr.net/npm/qs@6.9.1/dist/qs.js', css: '' },
{ name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js', css: '' },
{ name: 'lodash', library: '_', js: 'https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js', css: '' },
{ name: 'nprogress', library: 'NProgress', js: 'https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js', css: 'https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.css' }
]
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,maximum-scale=1,minimum-scale=1,
user-scalable=no,minimal-ui"/> -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= VUE_APP_TITLE %>
</title>
<!-- 使用 CDN 加速的 CSS 文件,配置在 vue.config.js 下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<!-- 使用 CDN 加速的 js 文件,配置在 vue.config.js 下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 使用 CDN 加速的 js 文件,配置在 vue.config.js 下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
html注入文件
/**
*在html文件注入配置文件
*
* @example
* new HtmlInjectConfig()
*/
/**
* @class
*/
class HtmlInjectConfigPlugin {
/**
* 构造函数
*/
constructor (baseUrl = '') {
this.files = [baseUrl + 'config.js']
}
apply (compiler) {
compiler.hooks.compilation.tap('HtmlInjectConfigPlugin', compilation => {
compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync('HtmlInjectConfig', (data, callback) => {
data.assets.js = this.files.concat(data.assets.js)
callback(null, data)
})
})
}
}
module.exports = HtmlInjectConfigPlugin
.env 文件
配置env即可配置gz压缩和cdn
# 所有环境默认
# ========base api======================
VUE_APP_BASE_API = ''
# 页面 title 前缀
VUE_APP_TITLE= ''
# 是否启用gz压缩
VUE_APP_GZ = false
# 是否启用CDN
VUE_APP_CDN = false