1.前言
1.不管講多少遍,對(duì)這個(gè)不同的環(huán)境中 baseURL的配置還是很懵
2.今天在單獨(dú)開篇文章寫下吧
3.vue-cli 模式環(huán)境變量 官方說明
4.process 說明
5.最新腳手架 vue/clie 4x
2.模式
1.png
3. 環(huán)境變量
- 環(huán)境變量規(guī)范
1.png
2.請(qǐng)注意，只有
NODE_ENV，BASE_URL 和以 VUE_APP_開頭的變量將通過 webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。這是為了避免意外公開機(jī)器上可能具有相同名稱的私鑰。
4.新建環(huán)境變量文件
- 新建環(huán)境變量
1.png
.env.development
.env.test
.env.production
- 根據(jù)自己的情況新建 可以建好多個(gè)
NODE_ENV=production
VUE_APP_BASE_URL = 'http://yzs.com/production/'
VUE_APP_UpLOAD_URL = 'http://yzs.com/uload/'
VUE_APP_DOWN_LOAD_URL = 'http://yzs.com/download/'
- NODE_ENV
- NODE_ENV 將決定您的應(yīng)用運(yùn)行的模式铁瞒，是開發(fā)品追，生產(chǎn)還是測(cè)試，因此也決定了創(chuàng)建哪種 webpack 配置骄恶。
5. package.json配置
- 配置
1.png
- 當(dāng)運(yùn)行
vue-cli-service命令時(shí)拇砰，所有的環(huán)境變量都從對(duì)應(yīng)的環(huán)境文件中載入梅忌。如果文件內(nèi)部不包含NODE_ENV變量，它的值將取決于模式- 例如除破，在
production模式下被設(shè)置為"production"牧氮，在test模式下被設(shè)置為"test"，默認(rèn)則是"development"瑰枫。NODE_ENV將決定您的應(yīng)用運(yùn)行的模式踱葛，是開發(fā)，生產(chǎn)還是測(cè)試光坝，因此也決定了創(chuàng)建哪種 webpack 配置尸诽。
- 代碼
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build --mode test",
"pro": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
- 這個(gè) mode和 上述新建的環(huán)境變量名字保持一致
- 測(cè)試的話可以把 serve 對(duì)應(yīng)的模式變?yōu)?test,這樣在本地運(yùn)行先查看這個(gè)環(huán)境變量有沒有切換成功
"serve": "vue-cli-service serve --mode test",
效果 process
- 看打印
1.png- 上班配置指令模式,在這里可以進(jìn)行本地測(cè)試
6.使用
- 這里放在了請(qǐng)求攔截 相應(yīng)攔截的封裝當(dāng)中
console.log('-------process-----', process.env.VUE_APP_BASE_URL)
console.log('-------env-----', process.env)
const service = axios.create({
timeout: 5000, //超時(shí)時(shí)間
baseURL:process.env.VUE_APP_BASE_URL
transformRequest: data => qs.stringify(data) //post請(qǐng)求參數(shù)處理,防止post請(qǐng)求跨域
})
7. 服務(wù)器
- 模擬下正經(jīng)的流程
- 我們創(chuàng)建個(gè)簡(jiǎn)單的
node服務(wù)器- 指定
靜態(tài)資源目錄/public- 前端項(xiàng)目執(zhí)行
打包指令,把打包后的文件(dist)/扔到這個(gè)服務(wù)器指定的靜態(tài)資源目錄里面- 運(yùn)行這個(gè)服務(wù)器
- 瀏覽器訪問靜態(tài)資源的 路徑例如
image.png- 默認(rèn)加載文件夾下的
index.html文件- 如果這樣操作,vue項(xiàng)目 config.js需要配置個(gè)
publicPath: './',根據(jù)自己的項(xiàng)目情況實(shí)際來定
// node 這個(gè)最簡(jiǎn)單的服務(wù)器創(chuàng)建 掌握
// npm init -y 創(chuàng)建 package.json文件
// npm i express 安裝
const express = require('express');
let app = express()
app.use(express.static("./public"))
app.post("/login",(req,res)=>{
res.json({
code:1000,
msg:'登錄成功',
token:'看啥 俺就是token'
})
})
app.get("/list",(req,res)=>{
res.json({
code:1001,
msg:'沒有查詢到數(shù)據(jù)'
})
})
app.listen(9090,()=>{
console.log('9090服務(wù)啟動(dòng)');
})
8. 后記
紙上得來終覺淺,絕知此事要躬行
