Vue采用CDN方式引入基础第三方库及Vuetify框架

最新推荐文章于 2024-05-24 09:35:10 发布

ZTao-z

最新推荐文章于 2024-05-24 09:35:10 发布

阅读量2.7k

点赞数 1

分类专栏：前端环境配置文章标签： vue.js CDN

本文链接：https://blog.csdn.net/think_A_lot/article/details/106291031

版权

前端同时被 2 个专栏收录

60 篇文章 2 订阅

订阅专栏

环境配置

5 篇文章 0 订阅

订阅专栏

Vue服务引入大量第三方库时，如果采用npm install的方式引入，打包时代码体积过大，对于小水管服务器不友好，这时候采用CDN进行库的动态引入会极大地减轻服务器的带宽压力，提高首屏渲染的效率

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>test</title>
    <!-- 引入样式 -->
    <link href="https://cdn.staticfile.org/vuetify/2.2.20/vuetify.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  </head>
  <!-- <body style="filter: grayscale(100%);"> -->
  <body>
    <noscript>
      <strong>We're sorry but rgan-client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- built files will be auto injected -->
    <div id="app"></div>
    <!-- 引入组件库 -->
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vuetify/2.2.20/vuetify.min.js"></script>
    <script src="https://cdn.staticfile.org/vuex/3.1.3/vuex.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
    <script>
      window.Vuetify = new Vuetify({
        icons: {
          iconfont: 'mdi', // default - only for display purposes
        },
      })
    </script>
  </body>
</html>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'

Vue.use(VueAxios, axios)

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes  // 为了方便演示，route内容省略
})

new Vue({
  router,
  store,
  vuetify: window.Vuetify, // CDN版的Vuetify会有一个全局的Vuetify变量
  components: {
    App
  },
  template: '<App/>'
  // render: h => h(App)
}).$mount('#app')

vue.config.js

module.exports = {
	..., // 其他配置省略，主要是加一项externals
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'vuetify': 'Vuetify'
    }
}

ZTao-z

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
13
评论
Vue采用CDN方式引入基础第三方库及Vuetify框架

Vue服务引入大量第三方库时，如果采用npm install的方式引入，打包时代码体积过大，对于小水管服务器不友好，这时候采用CDN进行库的动态引入会极大地减轻服务器的带宽压力，提高首屏渲染的效率public/index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont
复制链接

扫一扫