Vue笔记-vue3中.en.dev文件及axios.defaults.baseURL的使用

喜欢ヅ旅行 2023-01-20 05:56 7阅读 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][]

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

import { createApp } from 'vue'
    import App from './App.vue'
    import Antd from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.css';
    import axios from 'axios';
    
    axios.defaults.baseURL = process.env.VUE_APP_SERVER;
    
    const app = createApp(App);
    app.use(Antd).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/20221021/4bbfcfc9c2224e33872d48d093466f67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNzg0NDI3NjE_size_16_color_FFFFFF_t_70 1]: /images/20221021/0297ba2b96a04f1db978636a2591f3b2.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue3中Vue Router的使用区别

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

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

相关 Vue3项目中使用vue-router

目录 1、Vue Router 的主要概念和功能 2、什么是 vue-router？ 3、为什么需要 vue

古城微笑少年丶/ 2023年10月12日 18:15/ 0 赞/ 21 阅读

相关 Vue2、Vue3学习笔记

==== 一、创建新项目 1.1、命令行创建 1、vue 2 vue init webpack vue2 进入项目文件夹：cd vue2 执行：npm

红太狼/ 2023年10月06日 21:57/ 0 赞/ 24 阅读

相关 Vue笔记-vue3中.en.dev文件及axios.defaults.baseURL的使用

结构是这样的： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

喜欢ヅ旅行/ 2023年01月20日 05:56/ 0 赞/ 8 阅读

相关 Vue笔记-Ant Design Vue的使用（Vue3）

这里文档要这样看： ![20210420175826573.png][] 这里 npm install ant-design-vue@2.0.0-rc.3 -sa

亦凉/ 2023年01月14日 12:58/ 0 赞/ 315 阅读

相关 Vue (Vue3) 入门（学习笔记）

有过一点点 Vue2 的经验，准备系统学习一下 Vue，以最新的 Vue3 为准，记录一下 Vue 的学习笔记，也希望对其他人有帮助。文章目录安装、使用

蔚落/ 2022年12月27日 04:51/ 0 赞/ 244 阅读

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

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

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

相关 Vue3---Vue3中使用动画(Animate.css)

安装Animate.css npm install animate.css main.js文件中引入Animate.css import "a

小鱼儿/ 2022年09月11日 05:21/ 0 赞/ 589 阅读

相关 vue笔记（3）

父子组件，默认情况下父子组件之间数据不能直接使用，所以有一些新的方法、 1、子组件获取父组件数据 —父组件调用子组件时`<bb :m="msg" :y="msg2"></

爱被打了一巴掌/ 2022年06月02日 09:23/ 0 赞/ 180 阅读

相关 Vue - Vue使用笔记

判断DOM是否渲染完成在生命周期中，mounted周期是dom渲染后执行的。在组件内部，如果需要等待重新给Model赋值后DOM的渲染结束，可以使用`se

小灰灰/ 2022年05月13日 13:00/ 0 赞/ 302 阅读