config中dev.env.js,Configs

本文目錄一覽：

1、vue項目中，解決開發與線上請求接口不同的問題
2、vue中dev.env.js和prod.env.js 是什麼有什麼區別和關係？
3、本地運行vue dist文件
4、從線上拉的Vue代碼，直接運行報下面的錯誤
5、vue2.0和3.0區別

vue項目中，解決開發與線上請求接口不同的問題

在Vue開發當中經常會遇到各種各樣的接口問題,最近在項目中遇到開發和線上環境接口路徑不一樣的問題,網上找到很多博客,大多都是千篇一律的複製粘貼,對於新手來說可能比較難以理解,所以我寫這篇博客分享給剛使用vue做項目的小萌新同學一個詳細的接口配置思路。

webpack提供了生產環境和線上環境的兩種配置文件,平時開發當中使用一個接口,項目上線後就會自動切換成另外一個接口,廢話不多說,下面上圖。首先是找到vue-cli項目中config文件夾下的dev.env.js,默認是下面的樣子:

然後我們需要添加開發環境中使用的請求後台數據的接口域名,如下圖:

url_api是我自己設置的,可以自定義。後面的路徑就是你自己開發環境中的接口。

接着找到prod.env.js,默認如下圖:

在這個文件中同樣添加線上請求接口的配置:

最後在自己封裝的axios中去調用這個接口:

自定義變量 = process.env.url_api(這個就是剛才在config兩個文件中自定義的),拼接url到封裝的axios中。最後在生產環境中npm run dev 的時候會自動調用剛才在dev.env.js中定義的接口,當使用npm run build 去打包的時候會自動調用prod.env.js中配置的接口。

另外:跨域的問題

可能有些小夥伴在vue中配置了跨域的代理,所以導致拼接url中proxy代理失效,依然出現跨域的問題,解決這個問題我的個人思路是代理配置不變,只需要在dev.env.js中用空字符串替換本地接口。就不會出現開發環境中跨域的問題了。有不明白的可以問我,有更好的方案也希望能不吝賜教,謝謝。

鏈接：

vue中dev.env.js和prod.env.js 是什麼有什麼區別和關係？

一個是開發環境，一個是生產環境。

dev是開發的意思，prod是生產的意思。兩者的配置可以相同，也可以不同。一般情況下是不相同的，所以需要分開設置。

dev環境會包含測試、調試所需要的文件，生產環境只會包含正式上線發佈所包含的文件。

本地運行vue dist文件

當我們vue工作完成以後會打包一份dist文件給後台，之前本地肯定要測試一下，下面就是本人踩的一些坑，跟大家分享一下

a) 我們打包為dist以後第一個問題，我們打包為dist以後經常會遇見路徑出錯，也就是dom出現但是js與css不會出現，顯示路徑錯誤。

解決方法：打開腳手架的config文件中的index.js文件，查看build對象內的assetsPublicPath(發佈路徑)是否為”./”。默認的情況下是”/”，但是”/”是絕對路徑，而”./”是相對路徑

絕對路徑：就是你的主頁上的文件或目錄在硬盤上真正的路徑，比如c:/apache/cgi-bin下的路徑就是c:/apache/cgi-bin;

相對路徑：顧名思義就是相對於當前文件的路徑

b)路徑沒有問題了。文件可以引入進來了，那麼怎麼本地運行呢，因為dist文件是要有服務啟動的，一本情況下後台會啟動服務，但是總不能每一次都讓後台打包吧

解決方法：

1.這是dev內設置服務代理，

proxyTable: {

‘/api’: { //代理地址

target: ”, //需要代理的地址

changeOrigin: true, //是否跨域

secure: false, // 如果是https接口，需要配置這個參數

pathRewrite: {

‘^/api’: ‘/api’ //本身的接口地址沒有 ‘/api’ 這種通用前綴，所以要rewrite，如果本身有則去掉

2.配置開發環境與生產環境

在config/dev.env.js和prod.env.js里也就是開發/生產環境下分別配置一下請求的地址API_HOST

module.exports = merge(prodEnv, {

NODE_ENV: ‘”development”‘, // 開發環境

API_HOST: ‘”/api/”‘

})

module.exports = {

NODE_ENV: ‘”production”‘, // 生產環境

API_HOST: ‘””‘

}

3.調用

created() {

console.log(process.env.NODE_ENV, ‘環境’)

let urlHost = process.env.API_HOST // 會自動判斷當前是開發還是生產環境，然後自動匹配API_HOST

axios.get(urlHost + ‘DemoApi/oftenGoods.php’)

.then((res) = {

console.log(res, ‘代理之後’)

})

}

好了，就這麼多配置本地運行dist文件的方法大家git到了嗎

從線上拉的Vue代碼，直接運行報下面的錯誤

配置通用的API前綴可以更好在本地通過接口代理轉發獲取數據、或者部署時在Nginx中做反向代理，但是項目中一旦涉及大量的需要文件上傳的部分（文件上傳不走Ajax的方法），我們需要考慮更好管理接口的baseURL，項目中 Ajax 請求用 axios ，原始代碼如下

修改前

// 創建axios實例、配置baseURL、超時時間 const service = axios.create({ baseURL: ‘/development/api’, // 從環境進程中根據運行環境獲取的api的base_url timeout: 5000 // 請求超時時間 }) /* 保存分配角色 */ export function fetchSaveDisUser (params1) { return fetch({ url: ‘/user/empower’, method: ‘post’, params: params1, paramsSerializer: function (params) { return Qs.stringify(params, { arrayFormat: ‘repeat’ }) } }) } /* 上傳文件URL 從運行環境process.env中讀取API配置 */ export let uploadUrl = ‘/development/api/doi/analys/upload’

優化方法

找到config/dev.env.js 和 config/prod.env.js，在代碼添加變量 API_BASEURL（名字自定義）如下：

module.exports = { NODE_ENV: ‘”production”‘, // PS:不要複製、開發環境和生產環境有區別 API_BASEURL: ‘”/development/api/”‘ // 需要自己添加的代碼 }

然後在需要使用baseURL的地方替換為 process.env. API_BASEURL

修改後代碼如下

// 創建axios實例、配置baseURL、超時時間 const service = axios.create({ baseURL: process.env.API_BASEURL, // 從環境進程中根據運行環境獲取的api的base_ur timeout: 500

vue2.0和3.0區別

項目目錄不同

1、vue-cli3.o移除了config.文件夾。

2、多了vue.config.js文件。

3、新增了一個views文件夾。

4、刪除了static新增了public文件夾。

5、index.html移動到public了。

配置項不同

1、vue-cli2.0的域名配置，分為開發環境和生產環境。

2、所以配置域名時，需要在config中的dev.env.js和。

3、prod.env.js中分別配置3.0 config.文件已經被移除。

4、但是多了。env.production和env.development文件。

5、除了文件位置，實際配置起來和2.沒什麼不同。

創建項目的方式不一樣

1、vue-cli2.0，vue init webpack項目名。

2、vue-cli3.0 vue create項目名。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/253917.html