一、前言
這里相對於之前就沒那么麻煩了,通俗點說就是使用配置文件來管理多環境,實現環境的切換。
二、實現切換
1、增加開發和生產配置文件
在web
的根目錄下,創建開發環境切換配置文件.env.dev
,內容如下:
NODE_ENV=development
VUE_APP_SERVER=http://127.0.0.1:8880
在web
的根目錄下,創建線上環境切換配置文件.env.prod
,內容如下:
NODE_ENV=production
VUE_APP_SERVER=https://www.baidu.com
2、修改編譯和啟動支持多環境
在package.json
中修改,就是吧原來的server做下調整,示例代碼如下:
{
"name": "web",
"version": "0.1.0",
"private": true,
"scripts": {
"serve-dev": "vue-cli-service serve --mode dev --port 8080",
"serve-prod": "vue-cli-service serve --mode prod",
"build-dev": "vue-cli-service build --mode dev",
"build-prod": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@ant-design/icons-vue": "^5.1.9",
"ant-design-vue": "^2.0.0-rc.3",
"axios": "^0.21.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"typescript": "~4.1.5"
}
}
點擊右側npm
中的刷新按鈕,查看效果如下:
為了看到效果,我們在main.ts
添加輸出日志代碼,以便驗證是否修改成功,添加代碼如下:
console.log('環境',process.env.NODE_ENV);
console.log('服務端',process.env.VUE_APP_SERVER);
知識點:
NODE_ENV
為配置文件對應的NODE_ENV
變量- VUE_APP_SERVER為配置文件對應的
VUE_APP_SERVER
變量
重新編譯,啟動服務,結果如下圖:
3、修改axios
請求地址支持多環境
為什么要修改?
因為一個系統不可能只有一個請求,再者每個請求都寫全路徑,這會使代碼的維護成本很大,所以,這里我們采用統一的配置去維護會相對好些。
因為是全局的,所以只要在main.ts
中修改即可,引用axios
,並設置默認訪問路徑,示例代碼如下:
import {createApp} from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';
import router from './router';
import store from './store';
import axios from 'axios';
axios.defaults.baseURL=process.env.VUE_APP_SERVER;
//優點就是方便開發,缺點就是打包的時候會使文件較大(但並影響什么)
createApp(App).use(store).use(router).use(Antd).mount('#app')
console.log('環境', process.env.NODE_ENV);
console.log('服務端', process.env.VUE_APP_SERVER);
然后,我們在home
修改axios
的請求地址,只剩路徑即可,示例代碼如下:
<template>
<a-layout>
`<a-layout-sider width="200" style="background: #fff">
<a-menu
mode="inline"
v-model:selectedKeys="selectedKeys2"
v-model:openKeys="openKeys"
:style="{ height: '100%', borderRight: 0 }"
>
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
subnav 1
</span>
</template>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<laptop-outlined />
subnav 2
</span>
</template>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<template #title>
<span>
<notification-outlined />
subnav 3
</span>
</template>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
`
<a-list item-layout="vertical" size="large"
:grid="{ gutter: 16, column: 3 }" :data-source="ebooks1">
<template #renderItem="{ item }">
<a-list-item key="item.name">
<template #actions>
<span v-for="{ type, text } in actions" :key="type">
<component v-bind:is="type" style="margin-right: 8px"/>
{{ text }}
</span>
</template>
<a-list-item-meta :description="item.description">
<template #title>
<a :href="item.href">{{ item.name }}</a>
</template>
<template #avatar><a-avatar :src="item.cover" /></template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</a-layout>
</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRef} from 'vue';
import axios from 'axios';
import {LikeOutlined, MessageOutlined, StarOutlined} from '@ant-design/icons-vue';
const listData: Record<string, string>[] = [];
export default defineComponent({
components: {
StarOutlined,
LikeOutlined,
MessageOutlined,
},
name: 'Home',
setup(){
const pagination = {
onChange: (page: number) => {
console.log(page);
},
pageSize: 3,
};
const actions: Record<string, string>[] = [
{ type: 'StarOutlined', text: '156' },
{ type: 'LikeOutlined', text: '156' },
{ type: 'MessageOutlined', text: '2' },
];
console.log('set up');
//使用ref進行數據綁定
const ebooks=ref();
// 使用reactive進行數據綁定
const ebooks1=reactive({books:[]})
onMounted(()=>{
axios.get("/ebook/list?name=").then(response => {
console.log("onMounted");
const data = response.data;
ebooks.value = data.content;
ebooks1.books = data.content;
console.log(response);
})
})
return {
pagination,
actions,
ebooks1: ebooks,
ebooks2: toRef(ebooks1, "books")
}
}
});
</script>
<style scoped>
.ant-layout-sider {
float: left;
}
.ant-avatar {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 8%;
margin: 5px 0;
}
</style>
我們再次重新編譯啟動,查看結果如下:
由紅圈處查看,證明修改axios
請求地址,實現全局配置維護成功。
知識點:
- 多環境配置文件要放在web根目錄下
.env.xxx
,后綴xxx和package.json
里的指令的–mode xxx
對應- 增加
–port
參數來修改啟動端口 - 自定義變量必須以
VUE_APP_
開頭 - 通過設置
axios.defaults.baseURL
,來統一設置后端的IP
端口或域名
三、寫在最后
寫到這,終於有一種好像入門的感覺了,就是之前有些不懂得東西,突然就明白了,學東西確實是循序漸進,堅持才是最重要的。