vue3后台管理项目vite配置

 

import {viteMockServe} from "vite-plugin-mock";
import {defineConfig, ConfigEnv} from 'vite'
import vue from '@vitejs/plugin-vue'

const {resolve} = require('path')

// https://vitejs.dev/config/
export default defineConfig({
    // base:'./',
    resolve: {
        alias: {
            "@": resolve(__dirname, "./src"),
            "components": resolve(__dirname, "./src/components"),
            "styles": resolve(__dirname, "./src/styles"),
            "utils": resolve(__dirname, "./src/utils"),
        }
    },
    plugins: [
        vue(),
        viteMockServe({
            mockPath: 'mock',
            prodEnabled: ConfigEnv !== 'serve',
            injectCode: `
        import { setupProdMockServer } from './mockProdServer';
        setupProdMockServer();
      `,
        })],
    server: {
        port: '3000',
        open: false, //自动打开
        // https:true,
        base: "./ ", //生产环境路径
        proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
            // 正则表达式写法
            '^/api': {
                target: 'https://wuliu-web.zdtms.com', // 后端服务实际地址
                // target: 'https://openlogtest.zdtms.com', // 后端服务实际地址

                changeOrigin: true, //开启代理
                logLevel: 'debug', //运行时将本地发起的地址和对应指向的地址打印输出
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
})

/**
 * 由于 vite 不再使用传统的 webpack 配置文件，故 WebStorm 无法识别别名
 * 本文件对项目无任何作用，仅作为 WebStorm 识别别名用
 * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可
 */
const resolve = dir => require('path').join(__dirname, dir);

module.exports = {
    resolve: {
        alias: {
            '@': resolve('src')
        }
    }
};