• 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
        

  • 相关阅读:
    app专项测试之稳定性测试-monkey测试
    Mac下Fiddler的安装启动。
    测试环境搭建和部署(在Linux环境下搭建jdk+Tomcat+mysql环境和项目包的部署)
    mysql如何用sql语句修改表字段?
    VMware虚拟机出现“正在使用中”如何解决?
    Opencv2.1+vs2008生成不依赖编译环境的exe文件
    VS2008在win7下不时出现Microsoft Incremental Linker已停止工作
    没有找到opencv_core231d.dll运行结果不能显示
    Mat类型与IplImage类型之间相互转换
    获取当前可执行文件的路径(绝对路径)
  • 原文地址:https://www.cnblogs.com/TreeCTJ/p/12697858.html
Copyright © 2020-2023  润新知