脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue配置环境变量

Vue配置环境变量的正确打开方式

 更新时间：2022年01月07日 15:22:25   作者：0.活在风浪里  
这篇文章主要为大家介绍了Vue配置环境变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

第一 配置package.json

package.json 里的 scripts 配置 serve test build，通过 --mode xxx 来执行不同环境
通过 npm run serve 启动本地 , 执行 development
通过 npm run test 打包测试 , 执行 testing
通过 npm run build 打包正式 , 执行 production
"scripts": {
  "serve": "vue-cli-service serve --open",
  "test": "vue-cli-service build --mode testing",
  "build": "vue-cli-service build",
}

第二 配置介绍 简单说明 看详情点击上面tps

 以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。

 比如,VUE_APP_MY_NAME = '活在风浪' 通过process.env.VUE_APP_MY_NAME 访问。 

除了 VUE_APP_xxx 变量之外，在你的应用代码中始终存在两个默认变量NODE_ENV 和BASE_URL

第三 在根目录新建文件

  • .env.development 本地开发环境配置
  • 内容如下
NODE_ENV='development'
  • .env.staging 测试环境配置
NODE_ENV='production'
  • .env.production 正式环境配置
 NODE_ENV='production'

第四 

文件已建立完毕,下一步该封装baseURL了,如果你封装了axios,在你的axios父文件夹中在新建一个baseURL.js里面写的是判断环境的代码

let baseURL = "";
if (process.env.NODE_ENV == "development") {
    // 开发环境  因为我这里写了配置跨域的重定路径所以是api
    baseURL = "/api";
} else if (process.env.NODE_ENV == "production") {
    // 正式环境
    baseURL = "https://www.baidu.com";
} else {
    // 测试环境
    baseURL = "https://www.ceshi.com";
}
export default baseURL;

第五 

导出baseURL  在封装axsio的地方导入baseURL 将公共地址换成 baseURL变量 (baseURL变量就是写的环境判断)

使用不同的命令 请求的网址就不一样 如

//启动本地服务器
npm run serve
//启动打包命令
npm run build
//启动测试环境命令
npm run test

说一个细节:如果运行打包命令,dist中index.html直接打开是相对电脑盘符的

要使用一个插件 直接在vsc插件管理下载

总结:

先配置package.json 在新建需要文件 然后写判断环境代码

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

相关文章

  • vue使用el-upload实现文件上传功能

    vue使用el-upload实现文件上传功能

    这篇文章主要为大家详细介绍了vue使用el-upload实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • element el-upload文件上传覆盖第一个文件的实现

    element el-upload文件上传覆盖第一个文件的实现

    这篇文章主要介绍了element el-upload文件上传覆盖第一个文件的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • 深入理解Vue nextTick 机制

    深入理解Vue nextTick 机制

    这篇文章主要介绍了深入理解Vue nextTick 机制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue实现动态列表尾部添加数据执行动画

    vue实现动态列表尾部添加数据执行动画

    这篇文章主要介绍了vue实现动态列表尾部添加数据执行动画方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 解决vue3报错:找不到模块或其相应的类型声明

    解决vue3报错:找不到模块或其相应的类型声明

    这篇文章主要给大家介绍了关于如何解决vue3报错:找不到模块或其相应的类型声明的相关资料,这个错误提示是指在代码中引用了Vue模块,但是系统找不到该模块或者缺少相应的类型声明文件,需要的朋友可以参考下
    2023-07-07
  • vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

    vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

    vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求，目前支持上下左右无缝滚动，单步滚动，及支持水平方向的手动切换功能，本节介绍，vue添加 vue-seamless-scroll实现自动无缝滚动的效果，并对应添加点击事件
    2023-01-01
  • vue中.env文件配置环境变量的实现

    vue中.env文件配置环境变量的实现

    本文主要介绍了vue中.env文件配置环境变量的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue中使用go()和back()两种返回上一页的区别说明

    vue中使用go()和back()两种返回上一页的区别说明

    这篇文章主要介绍了vue中使用go()和back()两种返回上一页的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • 详解vue如何给特殊字段设置插槽

    详解vue如何给特殊字段设置插槽

    这篇文章主要为大家详细介绍了vue如何实现给特殊字段设置插槽,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以学习一下
    2023-09-09
  • vue3 学习笔记之axios的使用变化总结

    vue3 学习笔记之axios的使用变化总结

    本篇文章主要旨在帮助正在学vue3或者准备学vue3的同学了解网络请求axios该如何使用，防止接触了一点点vue3的同学会有个疑问。有兴趣的小伙伴可以关注一下
    2021-11-11

最新评论