vue项目里直接添加vuetify，不用nuxtjs

vue项目里直接添加vuetify，和在nuxtjs项目通过  @nuxtjs/vuetify  包添加vuetify是有一些不同的

项目用到的是  vue@2.6.14，vuetify@2.6.3

1、首先执行 yarn add vuetify

2、在 public 目录的 index.html 里添加下面几行

<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@6.x/css/materialdesignicons.min.css" rel="stylesheet">

3、在 src/main.js 里添加

import Vue from 'vue'
import App from './App.vue'
import vuetify from '@/plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  vuetify,
}).$mount('#app')

4、在 src/plugins 目录里新建一个 vuetify.js 文件

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

5、修改 vue.config.js 文件

const baseUrl = process.env.NODE_ENV === 'production' ? '/video-realtime-ai-sdk/' : '/'

module.exports = {
    lintOnSave: false,   // 取消 eslint 验证
    configureWebpack: {
        resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader'
                }
            ]
        }
    },
    chainWebpack: config => {
        config
        .plugin('html')
        .tap(args => {
            args[0].title = 'AI Video Realtime SDK - cutout.pro'
            args[0].describe = 'Create interactive online experiences with our video realtime AI SDK for web, ios and android. Enable virtual background, add fun face filters or product showcases.'
            return args
        })
    },
    publicPath: baseUrl
}

6、如果要把vue打包后生成的文件部署到二级路径，而不是根路径，比如  /video-realtime-ai-sdk，需要修改 vue.config.js 文件里的 baseUrl 字段

7、要在二级路径里正确显示本地图片，不能在img标签里直接引入本地图片，而是要在js里引入，需要修改 src/App.vue 文件，就想下面这样

<template>
　　<img :src="logoB" style="width: auto;height: 30px;"/>
</template>

<script>
import logoB from '@/assets/image/logo-b.png'

export default {
    data() {
        return {
              logoB: logoB,
        }
    }
}
</script>