vue3中.env.dev文件结合axios.defaults.baseURL的使用

布满荆棘的人生 2022-09-17 03:13 217阅读 0赞

结构是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNzg0NDI3NjE_size_16_color_FFFFFF_t_70][]

在项目里面新建.env.dev文件内容如下：

NODE_ENV=development
    VUE_APP_SERVER=http://127.0.0.1:8880
    VUE_APP_WS_SERVER=ws://127.0.0.1:8880

修改package.json

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNzg0NDI3NjE_size_16_color_FFFFFF_t_70 1][]

注意:

执行npm run serve-dev时 , --mode指定环境模式 dev(默认值：development),即执行.env.dev文件.

最后在main.js中修改axios的baseURL

import { createApp } from 'vue'
    import App from './App.vue'
    import axios from 'axios';
     
    axios.defaults.baseURL = process.env.VUE_APP_SERVER;
     
    const app = createApp(App);
    app.mount('#app');

调用的时候就方便了，如下：

const onSubmit = () => {
     
                    axios.post('/msg', {
                        msg: modelRef.msg.content
                    })
                        .then(function (response) {
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                };

这里就不用自己接全路径了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNzg0NDI3NjE_size_16_color_FFFFFF_t_70]: /images/20220828/e82e0d6a3e6f437eb8e2ac69dab62d94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNzg0NDI3NjE_size_16_color_FFFFFF_t_70 1]: /images/20220828/f4791bf15f434733a2b77f03331c4b3c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3中Vue Router的使用区别

在 Vue 3 中，useRouter和useRoute是两个用于 Vue Router 的 Composition API 函数，它们的用途和返回的对象不同，接下来详细...

╰+哭是因爲堅強的太久メ/ 2024年04月29日 01:03/ 0 赞/ 137 阅读

相关 vue3.x结合element-plus如何使用icon图标

基于 Vue 3的Element Plus如何使用icon图标首先注意Element Plus版本：官网如图所示， ![bb782152fe9549f6802dace54

太过爱你忘了你带给我的痛/ 2023年09月27日 12:41/ 0 赞/ 184 阅读

相关 vue-cli3结合ueditor里使用秀米总结

第一步：安装vue-ueditor-wrap：npm i vue-ueditor-wrap 第二步：从[ueditor官网][ueditor]下载资源放在public/sta

傷城~/ 2023年06月04日 14:58/ 0 赞/ 49 阅读

相关 Vue 学习笔记（3）路由的基本使用结合 SpringBoot

Vue 中的路由（VueRouter）路由的基本使用 router-link 使用默认路由路由中参数的传递传统方式传递参数

傷城~/ 2023年02月20日 13:39/ 0 赞/ 113 阅读

相关 Vue项目（Vue cli3）中的配置文件

文章目录 package.json 全局 CLI 配置文件 vue.config.js Js代码检查 .eslintrc.js 模式和环境变量 .

左手的ㄟ右手/ 2022年11月16日 00:56/ 0 赞/ 745 阅读

相关 Vue3中computed的使用

方式一 import { computed,reactive} from 'vue' export default { name: "Lay

怼烎@/ 2022年10月15日 01:59/ 0 赞/ 82 阅读

相关 vue3中.env.dev文件结合axios.defaults.baseURL的使用

结构是这样的： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

布满荆棘的人生/ 2022年09月17日 03:13/ 0 赞/ 218 阅读

相关 Vue Cli 3.8 结合 Jquery 与 Bootstrap 的使用

具体的代码请参考GitHub: https://github.com/slhuang520/vue/tree/master/cli/my-vue-cli 主要思想：

客官°小女子只卖身不卖艺/ 2022年01月21日 02:41/ 0 赞/ 283 阅读

相关 webpack与vue结合使用

例1：在webpack使用web 安装vue \`cnpm i vue -S 在index.html使用插件表达式来访问vue实例中的数据 <div

系统管理员/ 2022年01月18日 23:27/ 0 赞/ 459 阅读

相关 vue-cli3结合webapck优化

vue-cli3结合webapck优化 1 . 懒加载 (1). js 需要的时候加载 app.vue: <template>

骑猪看日落/ 2021年09月09日 05:24/ 0 赞/ 535 阅读