vite+vue3+ts 配置端口,跨域代理,.evn集中环境管理,@符

1、下载 node
pnpm install @types/node -D
// 或者
npm install @types/node -D

2、

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'

export default defineConfig(({ mode }) =>{
  //获取当前环境的配置
  const config = loadEnv(mode, './')
  return {
    plugins: [vue()],
    resolve:{
      alias:{
        '@': resolve(__dirname, './src')
      }
    },
    server:{
      host:'127.0.0.1',
      port:3000,
      open:true,
      proxy: {// 跨域代理
        '/api': {
          target: config.VITE_BASIC_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
    }
  }
})

 在tsconfig.json中配置

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*":["./src/*"]
    }
    ...
  }
  ...
}
    

 

posted @ 2023-03-14 14:51  kai·james  阅读(224)  评论(0)    收藏  举报