改造前
改造后
vue.config.js
/
// 标识是不是生产环境
const isProd = process.env.NODE_ENV.indexOf('production') !== -1
let target = {
target: process.env.VUE_APP_URL,
}
if(!isProd) {
target.pathRewrite = {
'^/api': ''
}
}
console.log(target)
const cdnConfig = require('./config/cdn.js');
module.exports = {
devServer: {
proxy: {
'^/api': target
}
},
chainWebpack: config => {
// 一个规则里的 基础Loader
// svg是个基础loader
const svgRule = config.module.rule("svg");
// 清除已有的所有 loader。
// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear();
// 添加要替换的 loader
svgRule
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
});
config.plugins.delete('preload');
config.plugins.delete('prefetch')
const cdnData = {css: [], js: [],};
//如果现在的服是在列表里的,就是需要min.js的
//webpack的run server这种开发环境,是期望有调试可看的,所以不引入min
const getKeyName = isProd && "min" || "default";
Object.keys(cdnConfig).forEach(key => {
if (cdnConfig[key].cdn.css[getKeyName]) {
cdnData.css.push(JSON.stringify(cdnConfig[key].cdn.css[getKeyName]))
}
if (cdnConfig[key].cdn.js[getKeyName]) {
cdnData.js.push(JSON.stringify(cdnConfig[key].cdn.js[getKeyName]))
}
});
console.log(cdnData)
// 配置cdn引入 挂载到全局下
config.plugin('html').tap((args) => {
args[0].cdnData = cdnData;
console.log(args)
return args;
});
// 开启 bundle 分析
// config
// .plugin('webpack-bundle-analyzer')
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
// config.resolve.alias
// .set('@', resolve('src'))
// config.module.rules.delete("svg");
// config.module
// .rule('svg-smart')
// .test(/\.svg$/)
// .include
// .add(resolve('src/assets/icons'))
// .end()
// .use('svg-sprite-loader')
// .loader('svg-sprite-loader')
// .options({
// symbolId: '[name]'
// })
},
configureWebpack: () => {
// 配置webpack 不打包的依赖
const externals = {};
Object.keys(cdnConfig).forEach(key => {
externals[key] = cdnConfig[key].name
});
console.log(externals)
return {
externals
}
},
}
html
<!DOCTYPE html>
<html lang="zh">
<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">
<link rel="icon" href="<%= BASE_URL %>bitbug_favicon.ico">
<!-- vue.config.js挂载到全局 这里通过htmlWebpackPlugin.options访问 -->
<% for(var i in htmlWebpackPlugin.options.cdnData && htmlWebpackPlugin.options.cdnData.css) { %>
<link rel="stylesheet" href=<%= htmlWebpackPlugin.options.cdnData.css[i] %> >
<% } %>
<title>闽电通</title>
</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>
<% for (var i in htmlWebpackPlugin.options.cdnData && htmlWebpackPlugin.options.cdnData.js) { %>
<script src=<%= htmlWebpackPlugin.options.cdnData.js[i] %>></script>
<% } %>
<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>js/aliyun-oss-sdk-5.3.1.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>js/aliyun-upload-sdk-1.5.0.min.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
main.js
router index.js
element cdn引入一定要放在vuecdn后面，element会自动挂载到vue实例上，项目中就可以通过this.$menage访问
cdn引入是会挂载到window下所以项目中的js可直接访问
