vite-相关配置以及引用

vitejs+ts+vue3-创建项目配置

个人配置习惯-----

配置 vite.config.ts

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        host: '0.0.0.0'
    },
    //  生产环境
    build: {
        //指定静态资源输出路径
        assetsDir: "assets",
        //静态资源按照类别区分目录
        rollupOptions: {
            output: {
                assetFileNames: assetInfo => {
                    // @ts-ignore
                    const info = assetInfo.name.split('.');
                    let extType = info[info.length - 1];
                    if (
                        // @ts-ignore
                        /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)
                    ) {
                        extType = 'media'
                        // @ts-ignore
                    } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
                        extType = 'images'
                        // @ts-ignore
                    } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
                        extType = 'fonts'
                    }
                    return `static/${extType}/[name]-[hash][extname]`
                },
                chunkFileNames: 'static/js/[name]-[hash].js',
                entryFileNames: 'static/js/[name]-[hash].js'
            }
        },
        minify: 'terser',
        // 指定输出文件路径
        outDir: "dist",
        
        // 代码压缩配置
        terserOptions: {
            // 生产环境移除console
            compress: {
                drop_console: true,
                drop_debugger: true,
            },
        },
    },
})

.env.development

#开发测试环境
ENV='development'
VITE_BASE_URL='https://xxxx'


.env.production

#生产环境
ENV='production'
VITE_BASE_URL='https://xxxx'

官方文档：https://cn.vitejs.dev/guide/env-and-mode.html#env-files

路由配置：router

import {createRouter, createWebHistory} from 'vue-router'

const routes:any = [
    {
        path: '/',
        name: 'salesCode',
        component: () => import('../views/xxx.vue'),
        meta: {
            title: 'title',
            keywords:'keywords',
            description:'description',
        },

    },
    {
        path: '/case',
        name: 'salesCase',
        component: () => import('../views/xxx.vue'),
        meta: {
            title: 'title',
            keywords:'keywords',
            description:'description',
        },
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

router.beforeEach((to, from, next) => {
    /*********动态修改keywords和description*************/
    /* 路由发生变化修改页面title */
    if (typeof (to.meta.title) === 'string') {
        document.title = to.meta.title
    }
    /* 路由发生变化修改页面keywords */
    if (typeof (to.meta.keywords) === 'string') {
        document.querySelector('meta[name="keywords"]')?.setAttribute('content', to.meta.keywords)
    }
    /* 路由发生变化修改页面description */
    if (typeof (to.meta.description) === 'string') {
        document.querySelector('meta[name="description"]')?.setAttribute('content', to.meta.description)
    }
    /**********************************************/
    next()
})

export default router

错误提示-----

报错：Cannot find module '*.vue' or its corresponding type declarations.

在src目录下，创建shims-vue.d.ts，并添加一下内容

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}