Vite中配置vue环境变量并请求

1、在目录下新建如下几个变量

  • .env.development(开发环境)
# just a flag
ENV = 'development'

# .env.development
# base api
VITE_APP_BASE_URL = '/dev-api'
  • .env.production(生产环境)
# just a flag
ENV = 'production'

# .env.production
# base api
VITE_APP_BASE_URL= '/prod-api'

2、vite.config.js配置

export default defineConfig({
  server: {
    // 服务配置
    port: port, // 类型: number 指定服务器端口;
    open: true, // 类型: boolean | string在服务器启动时自动在浏览器中打开应用程序;
    cors: true, // 类型: boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源
    proxy: {
      '/dev-api': {
        target: 'http://8.135.1.141',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/dev-api/, '')
      },
       '/prod-api': {
          target: 'http://8.135.1.141',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/prod-api/, '')
        }
      }
    },
 })

3、store配置

import { loginReq } from '@/api/user'
const actions = {
  // user login
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  login({ commit }, data) {
    return new Promise((resolve, reject) => {
      loginReq(data)
        .then((res) => {
          if (res.code === 20000) {
            console.log(res.data)
            //commit('SET_Token', res.data?.jwtToken)
            setToken(res.data?.jwtToken)
            resolve()
          } else {
            reject(res)
          }
        })
        .catch((error) => {
          reject(error)
        })
    })
  },
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

4、axios请求

import request from '@/utils/request'
export function loginReq(data) {
  return request({
    url: '/micro-service-api/integration-front/user/loginValid',
    data,
    method: 'post',
    bfLoading: false,
    isParams: true,
    isAlertErrorMsg: false
  })
}

5、页面请求

let loginReq = () => {
  loading.value = true
  store
    .dispatch('user/login', param)
    .then(() => {
      ElMessage({ message: '登录成功', type: 'success' })
      loading.value = false
      router.push("/");
    })
    .catch((res) => {
      loading.value = false
    })
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容