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

60 阅读 0 评论 40 点赞

我是靠谱客的博主还单身电源，最近开发中收集的这篇文章主要介绍vue3 + vite + typescript 中，简单配置 vite.config.ts前言，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

前言

前言

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

在这里更新一下
（1）、在history下使用时，要在路由中配置 history: createWebHistory(“/访问前缀”),如果没有前缀就直接使用 “/”。
（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/, '') // 重定向地址
            }
        }
    },
})