vue3中使用vite-ts構建項目時vite.config的配置

// "vite": "^2.6.4",
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 強制預構建插件包
  optimizeDeps: {
    include: ["axios"],
  },
  server: {
    // 本地運行配置，及反向代理配置
    host: "0.0.0.0",
    port: 8000,
    cors: true, // 默認啟用並允許任何源
    open: true, // 在服務器啟動時自動在瀏覽器中打開應用程序
    proxy: {
      "/api": {
        target: "http://jsonplaceholder.typicode.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  resolve: {
    // 配置別名
    alias: [
      {
        find: "@",
        replacement: path.resolve(__dirname, "src"),
      },
    ],
  },
  // 打包配置
  build: {
    target: 'modules',
    outDir: 'dist', //指定輸出路徑
    assetsDir: 'assets', // 指定生成靜態資源的存放路徑
    minify: 'terser' // 混淆器，terser構建后文件體積更小
},
});

項目建立后遇到一個問題是項目中有用別名@時,並不能識別,在於vite中設置的rollup構建模塊打包時的別名配置,如果想在組件中使用別名可以使用,要在tsconfig.json中配置ts文件中的別名

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        }
    }
}