vue3项目，vite+vue3+ts+pinia(8)-开发和生产模式配置+跨域

我们都知道有开发环境和生产环境,具体怎么做呢
一. 模式区分
1.1 在根目录下,新建 .env .env.local .env.development .env.production 四个文件

1.2 在.env.development 和 .env.production , 配置开发和生产网络请求地址

VITE_API_BASEURL = // 请求地址
1

1.3 在src 目录下新建 env.d.ts 文件

// eslint-disable-next-line no-unused-vars
interface ImportMetaEnv {
  VITE_API_BASEURL: string
}

1
2
3
4
5

1.4 在 src => utils => request.ts 文件中

const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASEURL
})
1
2
3

1.5 终端: npm run dev , 浏览器打印还是有数据的

二. 跨域
2.1 看vite 官网(https://cn.vitejs.dev/config/server-options.html), 服务器选项中server.proxy,

2.2 复制一下,在自己的项目vite.config.ts文件中添加

export default defineConfig({
// ...
server: {
    proxy: {
      '/abc': {
        target: 'http://jsonplaceholder.typicode.com', // 自己请求地址, 注意要换哦
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/abc/, '') // 接口以abc开头开始,真正的接口是不需要api的
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

2.3 在接口中( src => api => common.ts)

import request from '../utils/request'
import { iLoginInfo } from './types/common'

export const getLoginInfo = () => {
  return request<iLoginInfo>({
    method: 'get',
    url: '/abc/login/info'
  })
}

1
2
3
4
5
6
7
8
9
10

2.4 还有一点src => utils => request.js

const request = axios.create({
  timeout: 5000 // 超时时间5s
  // baseURL: import.meta.env.VITE_API_BASEURL
})
1
2
3
4

2.5 终端 npm run dev