vite

别名导入

向军大叔每晚八点在 抖音 和 bilibli 直播

为目录指定别名可以方便的import文件，修改vite.config.ts文件。

首先安装类型声明文件

yarn add -D @types/node

接下来将别名 @ 指向到 src 目录

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: { '@': path.resolve(__dirname, 'src') },
    },
})

编译目录

有时 Vue 需要和后台程序如 Laravel 等结合使用，这就需要定义生产环境下的编译目录。

• 下面是在生产环境时为 url 定义前缀/dist/
• 并将项目编译到 public/dist 目录
• 如果编译在 vue 的根目录(root)会自动清空，但下例中编译目录不在 vue 的root根目录，所以设置emptyOutput表示编译时自动清空 dist 目录

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

//是否为生产环境
const IS_PRODUCTION = process.env.NODE_ENV === "production";

export default defineConfig({
    plugins: [vue()],
    // 生产环境与开发环境指定不同的 URL 静态文件前缀
    base: IS_PRODUCTION ? "/dist/" : "/",
    build: {
        //编译目录
        outDir: "../public/dist",
        //编译时是否自动清空目录
        emptyOutDir: true,
    },
    resolve: {
        alias: { '@': path.resolve(__dirname, 'src') },
    },
});