Vue3之 Vue CLI多环境配置_vue.js

这篇文章主要介绍了Vue3之 Vue CLI多环境配置,通俗点说就是使用配置文件来管理多环境,实现环

Vue3之 Vue CLI多环境配置_vue.js

这篇文章主要介绍了Vue3之 Vue CLI多环境配置,通俗点说就是使用配置文件来管理多环境,实现环境的切换,西阿棉详细内容,需要的朋友可以参考一下

目录

一、前言二、实现切换1、增加开发和生产配置文件2、修改编译和启动支持多环境3、修改axios请求地址支持多环境

一、前言

这里相对于之前就没那么麻烦了,通俗点说就是使用配置文件来管理多环境,实现环境的切换。

二、实现切换

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\” 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请求地址,实现全局配置维护成功。

知识点:

多环境配置文件要放在web根目录下
.env.xxx,后缀xxx和package.json里的指令的–mode xxx对应
增加–port参数来修改启动端口
自定义变量必须以VUE_APP_开头
通过设置axios.defaults.baseURL,来统一设置后端的IP端口或域名

到此这篇关于Vue3之 Vue CLI多环境配置的文章就介绍到这了,更多相关Vue CLI多环境配置内容请搜索3399IT网以前的文章或继续浏览下面的相关文章希望大家以后多多支持3399IT网!

本文为网络共享文章,如有侵权请联系邮箱485837881@qq.com

作者: 久曲键

为您推荐

返回顶部