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. 知乎千万级高性能长连接网关 https://zhuanlan.zhihu.com/p/66807833

    知乎千万级高性能长连接网关揭秘 9 天前 · 来自专栏 知乎技术专栏 实时的响应总是让人兴奋的,就如你在微信里看到对方正在输入,如你在王者峡谷里一呼百应,如你们在直播弹幕里不约而同的 666,它们的背 ...

  2. Tosca Connection Validation error:40 - Could not open a connection to SQL Server (不知道怎么解决)

    谁知道下面这个错怎么解决,请给我留言,谢谢. 数据库能正常链接,服务也是 normal running

  3. C# 使用Task执行异步操作

    为什么要使用 Task Task 和 Thread 区别 Task 介绍 Task 简单实现 Task 执行状态 为什么要使用 Task 线程是创建并发的底层工具,因此具有一定的局限性. 没有简单的方 ...

  4. 011-多线程-基础-基于AbstractQueuedSynchronizer自定义同步组件

    一.概述 队列同步器AbstractQueuedSynchronizer,是用来构建锁或者其他同步组件的基础框架. 1.1.自定义独占锁同步组件 设计一个同步工具:该工具在同一时刻,只允许一个线程访问 ...

  5. Javascript——概述 && 继承 && 复用 && 私有成员 && 构造函数

    原文链接:A re-introduction to JavaScript (JS tutorial) Why a re-introduction? Because JavaScript is noto ...

  6. json简单案例

    1.Group类 import java.util.ArrayList; import java.util.List; class Group{ private int id; private Str ...

  7. LeetCode_121. Best Time to Buy and Sell Stock

    121. Best Time to Buy and Sell Stock Easy Say you have an array for which the ith element is the pri ...

  8. iis启动异常 0x80072749

    错误提示: “/”应用程序中的服务器错误. 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同 ...

  9. Node.js中使用pipe拷贝大文件不能完全拷贝的解决办法

    原来的代码如下: var readable = fs.createReadStream( filepath ); var writable = fs.createWriteStream( outFil ...

  10. HTML(HTML+CSS基础)

    HTML: 认识html文件基本结构 这一节中我们来学习html文件的结构:一个HTML文件是有自己固定的结构的. <html> <head>...</head> ...