关于vite中配置文件的说明

注意内容

• 不配置base时，打包之后访问时会出现白屏
• 不配置alias时，每次引入文件需要找根目录，比较麻烦

vite.config.ts

import { defineConfig,loadEnv } from 'vite';  //帮手函数，不用 jsdoc 注释也可以获取类型提示
import vue from '@vitejs/plugin-vue';
//配置路径以@开头
const path = require('path');
//配置自动引入  npm install unplugin-auto-import/vite
import AutoImport from 'unplugin-auto-import/vite'
//解决vite中不能使用require的问题    npm i vite-plugin-require-transform --save-dev
import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
    plugins: [
        vue()，
        //解决vite中不能使用require的问题
        requireTransform({
            fileRegex: /.js$|.vue$/
        }),
    ],
    //配置自动引入
    AutoImport({
        imports:['vue','vue-router']//自动导入vue和vue-router相关函数
    }),
    define: {
        'process.env': {},
    },
    resolve: {
        // 配置路径别名
        alias: {
            "~": path.resolve(__dirname, "./"),
            '@': path.resolve(__dirname, './src'),
        },
        // 共享配置
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', ".less"]
    }，
    //跨域设置
    server: {
        port: "3000",  //端口
        host: true,    //ip地址
        open: true,    //服务启动时自动在浏览器打开应用
        // 反向代理配置
        proxy: {
            '/api': {
                target: "https://test.163.com",
                changeOrigin: true, //设置访问目录地址运行跨域
                rewrite: (path) => path.replace(/^\/api/, '')
            },
            '/api': "https://test.163.com",
        }
    },
})