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.js
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue