vueCli3 CDN資源優化加載


搜索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
    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM