减少打包组件vue.config.js——Webpack的externals的使用

时间：2023-03-09 04:19:00
减少打包组件vue.config.js——Webpack的externals的使用

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')

相关文章