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=" auto;height: 30px;"/> </template> <script> import logoB from '@/assets/image/logo-b.png' export default { data() { return { logoB: logoB, } } } </script>