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

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

ZTao-z

2963人浏览 · 2020-05-22 21:21:44

ZTao-z · 2020-05-22 21:21:44 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^