普歌-vue-template-amdin用webpack配置CND加速/打包忽略element、vue等（亲测有效）

本文链接：https://blog.csdn.net/weixin_45491473/article/details/117360126

普歌-vue-template-amdin用webpack配置CND加速详细教程

依旧废话两句：项目不优化，用户两行泪
客官看图

回归正题，配置流程

1. 把main.js分成两个js，一个是开发环境下的(main-dev.js)，一个是生产环境下的(main-prod.js)

第一步

main-dev.js文件中的elementui、echarts等还是正常引用(我这有echarts、element等)

import Vue from "vue";
import "normalize.css/normalize.css"; // A modern alternative to CSS resets
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.use(echarts)
import Blob from './vendor/Blob'
import Export2Excel from './vendor/Export2Excel.js'
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import locale from "element-ui/lib/locale/lang/zh-CN"; // lang i18n
import "@/styles/index.scss"; // global css
import App from "./App";
import router from "./router";
import store from "./store";
import "@/icons"; // icon
import "@/permission"; // permission control
Vue.use(ElementUI, { locale });
Vue.config.productionTip = false;
new Vue({
  el: "#app",
  router,
  store,
  render: h => h(App)
});

main-prod.js中的element、echarts就可以注释了,因为打包也不会打包进去

	import Vue from "vue";
	import "normalize.css/normalize.css"; // A modern alternative to CSS resets
	// import * as echarts from "echarts";
	// Vue.prototype.$echarts = echarts;
	// Vue.use(echarts);
	// import ElementUI from "element-ui";
	// import "element-ui/lib/theme-chalk/index.css";
	// import locale from "element-ui/lib/locale/lang/zh-CN"; // lang i18n
	import "@/styles/index.scss"; // global css
	import App from "./App";
	import router from "./router";
	import store from "./store";
	import "@/icons"; // icon
	import "@/permission"; // permission control
	// Vue.use(ElementUI, { locale });
	Vue.config.productionTip = false;
	new Vue({
	  el: "#app",
	  router,
	  store,
	  render: h => h(App)
});

2. 在vue-admin中有一个build文件，是专门处理打包的文件，比如webpack

在build/webpack.base.conf.js中把entry入口去掉
分别在webpack.dev.conf.js和webpack.prod.conf.js中加入各自的入口entry

3. 在webpack.prod.conf.js中配置externals(不打包哪些)

externals: {
   vue: "Vue",
    "vue-router": "VueRouter",
    "element-ui": "ELEMENT",
    axios: "axios",
    echarts: "echarts"
},

配置打包

4. 在webpack.prod.conf.js下的plugin中new HtmlWebpackPlugin修改添加CND(cdn链接的版本号要与package.json中的版本一致)

   cdn: {
       css: [
         // element-ui css
         "https://cdn.bootcss.com/element-ui/2.13.2/theme-chalk/index.css"
       ],
       js: [
         // vue  vue-router
         "https://cdn.bootcss.com/vue/2.5.17/vue.min.js",
         "https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js",
         "https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js",
         //echarts
         "https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js",
         // element-ui js
         "https://cdn.bootcss.com/element-ui/2.13.2/index.js",
         "https://cdn.bootcss.com/element-ui/2.13.2/locale/zh-CN.min.js"
       ]
    }

在这里插入图片描述

5. 找到webpack.prod.conf.js中的optimization，把elementUI配置项去掉

在这里插入图片描述

最后在index.html文件中用htmlWebpackPlugin下的配置项添加cdn文件

 <head>
    <% if(htmlWebpackPlugin.options.cdn) {%> <% for(var css of
       htmlWebpackPlugin.options.cdn.css) { %>
       <link rel="stylesheet" href="<%=css%>" />
    <% } %> <% } %>
  </head>
  <body>
    <div id="app"></div>
    <% if(htmlWebpackPlugin.options.cdn) {%> <% for(var js of
    htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>"></script>
    <% } %> <% } %>
  </body>

打包上线没有报错，功能一切正常

作者：wantLG
本文源自：wantLG的《普歌-vue-template-amdin用webpack配置CND加速/打包忽略element、vue、vueRouter等（亲测有效）)》
本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。