vue.config.js

module.exports = {

    configureWebpack:{

      externals: {

         vue: 'Vue',

         'vue-router':'VueRouter',

         axios: 'axios'

      }

    }

}

在index.html文件中引入CDN

<!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></title>

    <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>

    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>

    <script src="https://cdn.bootcss.com/element-ui/2.12.0/locale/zh-CN.js"></script>

    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

  </head>

  <body>

    <noscript>

      <strong>We're sorry but good doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

在index.js文件中删除导入的elementui

import Vue from 'vue'

import App from './App.vue'

import router from './router'

//import 'element-ui/lib/theme-chalk/index.css'

//import './plugins/element.js'

import './assets/global.css'

Vue.config.productionTip = false

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

减少打包组件vue.config.js——Webpack的externals的使用的更多相关文章

  1. webpack.config.js和vue.config.js的区别

    webpack.config.js是webpack的配置文件,所有使用webpack作为打包工具的项目都可以使用,vue的项目可以使用,react的项目也可以使用. vue.config.js是vue ...

  2. vue-cli & webpack & vue.config.js

    vue-cli & webpack & vue.config.js configureWebpack // vue.config.js module.exports = { confi ...

  3. vue3.0 vue.config.js 配置实战

    今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...

  4. vue.config.js常用配置

    使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建 ...

  5. vue.config.js配置前端代理

    // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这 ...

  6. Vue-Cli 3.0 + vue.config.js

    虽然一直没有亲手搭建过vue项目,但是2.0的时候就开始自学(但并没有实践项目).然后公司最近有个人用3.0做了个项目,公司让我参与进去,我就顺便学习了一把3.0.(美滋滋) 因为电脑的环境还是之前自 ...

  7. vue cli3.3 以上版本配置vue.config.js

    // vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions// 这里只 ...

  8. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  9. vue-cli3的vue.config.js文件配置，生成dist文件

    //vue.config.jsonconst path = require('path'); // const vConsolePlugin = require('vconsole-webpack-p ...

随机推荐

  1. 测试开发中Django和Flask框架

    Python测试开发中Django和Flask框架 为了更好地阐述这个问题,我们把开发一个应用的过程进行类比,往往开发一个应用(web应用.系统应用)跟建造房子的过程一样,需要先打地基,搭好骨架,然后 ...

  2. MSP与PSP

    摘抄自Triton.zhang——eeworld 1. MSP和PSP 的含义是Main_Stack_Pointer 和Process_Stack_Pointer,在逻辑地址上他们都是R13 2. 权 ...

  3. export命令import命令

    export命令import命令 export { name1, name2, …, nameN }; export { variable1 as name1, variable2 as name2, ...

  4. keras启用tensorboard

    在callback函数中添加tensorboard,启用tensorboard. # TensorBoard callback tensorboard_cb = K.callbacks.TensorB ...

  5. question——缓存清理、更新

    突然理解了各大电信公司客服说的最多的一句话“您提交的申请将会在**小时之后生效,建议您到时登陆查看”. 分析之后,我认为这里面大多的原因在于: 1.定时任务: 2.缓存有效期. 可见这么庞大的公司,目 ...

  6. java设置北京时间的时区

    java设置北京时间的时区   解决方法: 设置北京时间的时区,消除时间差. TimeZone timeZone = TimeZone.getTimeZone("GMT+8"); ...

  7. WordPress获取特色图像的链接地址

    为什么要获取WordPress的特色图像呢? 这主要是因为,我们已经写好了静态模板文件,只有获取WordPress特色图像地址插入进去就可以了,非常方便. 还有就是有的时候,我们需要设置图片的宽度为1 ...

  8. Ubuntu16.04下KeepAlived+Nginx 布署

    前言         网上已经有很多相关文章,对各种概念介绍的比较清楚,也有各种详细的步骤,这里主要记录本要在ubuntu16.04下的布署过程,主要记录编译安装keepalived时遇到的坑及解决办 ...

  9. utf8 gbk 互转

    public static function utf8_to_gbk($utfstr) { return iconv("utf-8", "gbk//IGNORE" ...

  10. 【leetcode算法-简单】53. 最大子序和

    [题目描述] 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4],输出: 6解释:  ...