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

前言

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

在这里更新一下
（1）、在history下使用时，要在路由中配置 history: createWebHistory(“/访问前缀”),如果没有前缀就直接使用 “/”，并且在
vite.config.ts 中，base: process.env.NODE_ENV === “production” ? “/访问路径/” : “./”,，进行配置线上文件访问路径。
（2）、hash使用 createWebHashHistory()，一般不配置

import {
    
     createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const router: RouteRecordRaw[] = [
	{
    
    
		path: "/",
		name: "name",
		component: () => import("vue文件路径"),
	},
	// .... 等等
];

export default createRouter({
    
    
    routes: routes,
    history: process.env.NODE_ENV == "development" ? 
        createWebHashHistory() :
        createWebHistory("/qsOrder"),
})

（3）、配置 history 模式，当是在线上服务器配置，且有地址前缀时，vite.config.ts 中，
---------- base: process.env.NODE_ENV === “production” ? “/前缀” : “./”,
---------- 没有前缀直接使用 ‘./’，即可。

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/, '') // 重定向地址
            }
        }
    },
})