亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

前言

vue項目開發(fā)，會經歷本地測試、打包、生產過程，其中不同階段需要調試的api接口環(huán)境不同，要根據具體來設置。其實主要就是兩個方面，配置‘本地運行’和‘打包運行’的api接口環(huán)境。

vue3項目的配置

• vue3項目沒有了config文件夾，需要在項目的根目錄下創(chuàng)建相關文件

(1) 根目下創(chuàng)建指定文件
在項目的根目錄新建3個文件夾，分別對應開發(fā)（dev），測試（test），生產（prod） 文件命名： .env.dev , .env.test , .env.prod

(2) 剛剛創(chuàng)建的三個文件對應的內容代碼

• .env.dev

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地開發(fā)api地址'

• .env.prod

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式環(huán)境api地址'

• .env.test

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '測試環(huán)境api地址'

(3) 修改package.json腳本

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev":"vue-cli-service serve --mode dev",//本地運行命名
    "build:test":"vue-cli-service build --mode test",//測試環(huán)境打包命名
    "build:pro":"vue-cli-service build --mode prod"//正式環(huán)境打包命名
  },

(4) 項目中使用環(huán)境變量

// 任意地方都可以使用
console.log(process.env.VUE_APP_BASEURL)

(5) 運行命令

本地開發(fā)啟動命令：npm run dev
測試環(huán)境打包：npm run build:test
正式環(huán)境打包：npm run build:pro

正式配置請求環(huán)境

1.項目根目錄創(chuàng)建環(huán)境變量代碼和指定文件

本地運行環(huán)境
(1) .env.dev

# 本地環(huán)境
NODE_ENV = 'development'
# 本地環(huán)境模塊名
VUE_APP_CURRENTMODE = 'dev'
# 本地環(huán)境，api前綴
VUE_APP_BASE_API = '/api'
# 本地測試環(huán)境，url地址
VUE_APP_BASE_URL = '本地開發(fā)api地址'

本地運行測試環(huán)境
(2).env.dev_test

# 本地測試環(huán)境
NODE_ENV = 'development'
# 本地測試環(huán)境模塊名
VUE_APP_CURRENTMODE = 'dev_test'
# 本地測試環(huán)境，api前綴
VUE_APP_BASE_API = '/api'
# 本地測試環(huán)境，url地址
VUE_APP_BASE_URL = '本地測試開發(fā)api地址'

打包正式環(huán)境
(3).env.prod

# 線上環(huán)境
NODE_ENV = 'production'
# 線上環(huán)境模塊名
VUE_APP_CURRENTMODE = 'prod'
# 線上環(huán)境，api前綴
VUE_APP_BASE_API = '/api_production'
# 線上環(huán)境，url地址
VUE_APP_BASE_URL = '線上正式環(huán)境api地址'

打包測試環(huán)境
(4).env.prod_test

# 線上環(huán)境
NODE_ENV = 'production'
# 線上測試環(huán)境模塊名
VUE_APP_CURRENTMODE = 'prod'
# 線上測試環(huán)境，api前綴
VUE_APP_BASE_API = '/api_test'
# 線上測試環(huán)境，url地址
VUE_APP_BASE_URL = '線上測試環(huán)境api地址'

項目結構如下

2.項目根目錄創(chuàng)建vue.config.js，配置反向代理解決跨域

當前配置可以解決請求跨域 和打包頁面白板

module.exports = {
    // 設置代理（解決請求跨域）
    devServer:{
        host: '0.0.0.0',  //本地地址
        port: 8080,       //自定義端口
        https: false,     //false關門https,true為開啟
        open: false,      //自動打開瀏覽器
        proxy:{
            [process.env.VUE_APP_BASE_API]:{
                target: process.env.VUE_APP_BASE_URL,
                ws: true,
                changeOrigin: true,
                pathRewrite:{
                    ['^'+process.env.VUE_APP_BASE_API]:''
                }
            }
        }
    },
    // 解決打包頁面白板
    publicPath: "./"
}

3.封裝axios配置環(huán)境變量，讓請求本地運行的時候走代理服務器 發(fā)布線上的時候同時也可以兼容

src/utils/request.js

import axios from 'axios'
const service = axios.create({
    baseURL: process.env.NODE_ENV==='development'?process.env.VUE_APP_BASE_API:process.env.VUE_APP_BASE_URL,
    timeout: 5000  
})
// 不需要token驗證的 接口白名單
// const APIWhite = ['users/login']
// 請求攔截 設置統(tǒng)一header
service.interceptors.request.use(
    config =>{
        return config;
    },
    error =>{
        return Promise.reject(error)
    }
)
// 響應攔截 401 token過期等處理
service.interceptors.response.user(
    response =>{
        return response
    },
    error =>{
        return Promise.reject(error)
    }
)
export default service

api封裝管理（vue3不能像vue2一樣在main.js掛載全局變量）
scr/api/index.js

import request from '@/utils/request'
// 登錄
export function doLogin (data) {
    return request({url: '/index/envtest',method: 'POST', data})
}

頁面調用

import { doLogin } from '../api/index'
doLogin({},res=>{
    console.log(res);
})

結果如下：