搜索CDN加速貌似https://www.bootcdn.cn/ bootCDN國內用 很nice
主要以我自己的為例子哈
步驟1:卸載npm 安裝的依賴 例如:npm uninstall element-ui axios vue vuex vue-router 如果有要卸載多個的話 直接后面加上即可
進入到bootCDN里 找到你要用的CDN地址 copy一下 到public里的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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="./reset.css">
<link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet"> 這個是element-ui的css樣式
</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地址唄-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
</body>
</html>
步驟2:在vue.config.js 中配置 element-ui 的變量名必須使用 ELEMENT 沒的說的 為啥子呢?因為element-ui的 umd 模塊名是 ELEMENT
module.exports = { configureWebpack: { resolve: { extensions: ['.js', '.json', '.vue', '.scss', '.css'], alias: {}, }, externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'axios': 'axios' } } }
步驟3:讓我們來到main.js 里面 其實我這邊需要改動的就是一個element-ui的一個變量名 ELEMENT
import Vue from 'vue' import router from './router' import store from './store' import ELEMENT from 'element-ui'; Vue.use(ELEMENT)
步驟4:進入到router里面的index.js 里面 將 引用的vue 和 vue-router 給注釋掉
進入到store里面的index.js 里面 將 引用的 vue 和 vuex 給注釋掉
最后跑一下 看下跑的起來啵 沒問題 那就 沒問題了
參考的大佬鏈接 :https://www.jianshu.com/p/aebfa267f7cd