|
一、前言这里相对于之前就没那么麻烦了，通俗点说就是使用配置文件来管理多环境，实现环境的切换。
二、实现切换
1、增加开发和生产配置文件在web的根目录下，创建开发环境切换配置文件.env.dev，内容如下： NODE_ENV=developmentVUE_APP_SERVER=http://127.0.0.1:8880 在web的根目录下，创建线上环境切换配置文件.env.prod，内容如下：
NODE_ENV=productionVUE_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" rel="external nofollow" >{{ 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请求地址，实现全局配置维护成功。 知识点： |
