vue3 + vite + typescript 中，配置 vite.config.ts

前言

1、当前文件配置发布上线，只适用于路由的 hash 模式，history模式暂时还未发现有什么方法能够解决线上不显示的问题，如果有知道的同志提拔提拔小生。

2、刚写了一个关于此的项目记录一下，哪里觉得写的不对的地方，希望各位大佬多提提宝贵的意见，废话不多说，上代码。

// vite.config.ts 文件
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve }  from "path";
//引入vant相关内容
import styleImport, { VantResolve } from 'vite-plugin-style-import';
// https://vitejs.dev/config/
export default defineConfig({
    // 设置开发者模式以及生产模式访问路径
    base: process.env.NODE_ENV === "production" ? "./" : "./",
    plugins: [
        vue(),
        styleImport({
            //  引入vant UI  的样式
            resolves: [VantResolve()],
        }),
    ],
    打包配置
    build: {
        target: 'modules',
        outDir: 'dist',         //指定输出路径
        assetsDir: 'assets',    // 指定生成静态资源的存放路径
        minify: 'terser',       // 混淆器，terser构建后文件体积更小
        rollupOptions: {
            output: {
                //  指定打包输出的js文件名称
                chunkFileNames: "js/[name]-[hash].js",
                entryFileNames: "js/[name]-[hash].js",
                // assetFileNames: "[ext]/[name]-[hash].[ext]"
                //设置css和图片的文件夹名称，但是有弊端，css设置的背景图片访问不到,路径是错误的
            }
        }
    },
    resolve: {
        alias: {
            //配置全局的访问路径，可通过@访问到src文件地址
            "@": resolve(__dirname, "./src"),
        }
    },
    server: {
        cors: true, // 默认启用并允许任何源
        open: false,// 默认打开浏览器
        port: 80,// 访问的端口号
        host: "0.0.0.0",// 访问的地址
        proxy: {
            '/api': {
                target: "请求的域名地址",
                changeOrigin: true,// 是否允许跨域代理
                rewrite: (path) => path.replace(/^\/api/, '') // 重定向地址
            }
        }
    },
})