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/*"
            ]
        }
    }
}