vue-cli3开发中的环境配置

最新推荐文章于 2023-04-11 14:31:57 发布
最新推荐文章于 2023-04-11 14:31:57 发布
阅读量317 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37716271/article/details/102776712
版权
本文介绍了使用vue-cli3创建项目时的环境配置，包括如何通过.env文件设置不同环境的BASE_URL和NODE_ENV，以及如何在vue.config.js和package.json中利用process.env进行配置。重点讲解了如何配合package.json的script命令与.env文件实现环境变量的管理。
摘要由CSDN通过智能技术生成
创建项目
  • vue create projectName
环境配置的主要体现
  • BASE_URL不同（如果是一个很大的项目，则在.env.命令名的文件中配置DOMAIN目录）
  • 打包方式不同，在默认的打包配置下，webpack会根据NODE_ENV的值进行不同的打包
主要运行环境参数(process.env)
  • process.env.BASE_URL 项目根路径
  • process.env.NODE_ENV 运行环境类型
    • 值为production,test,develop中的一个
全局参数设置
  1. 上面提到的两个参数可以在vue.config.js中判断类型来实现对应的相关配置
  2. 这个两个参数可以在package.json中设置
"serve": "cross-env BASE_URL=http://xxx.com vue-cli-service serve",
"pre": "cross-env NODE_ENV=
最低0.47元/天 解锁文章
m0_37716271
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli脚手架-bulid下的配置文件
08-27
Vue-cli脚手架bulid下的配置文件是Vue.js开发过程中的一部分，主要用于创建和配置Vue.js项目。通过学习和掌握这些配置文件，可以帮助开发者更好地理解Vue.js项目的结构和工作原理，并且提高项目的开发效率和质量。 ...
vue-cli3 热更新配置操作
10-14
确保你的环境变量 `NODE_ENV` 设置正确，以便在生产环境和开发环境中应用不同的配置。 总之，Vue CLI 3 的热更新功能对于提高开发效率非常有用。遇到热更新问题时，检查 `vue.config.js` 文件的配置，特别是与 HMR ...
vue-cli3 环境设置
马优晨
06-28 797
vue-cli3默认设置： 使用vue-cli3打包项目，通过配置不同的指令给项目设置不一样的配置。 npm run serve时会把process.env.NODE_ENV设置为‘development’； npm run build 时会把process.env.NODE_ENV设置为‘production’ 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 头疼的是打包时线上环境可能分多种，比如测试环境和生产环境等等。 配置多个环境： 在vu
vue-cli3.0使用及配置
weibaobao1314的博客
09-24 153
vue-cli3.0使用及配置 1.先全局安装vue-cli3.0 检测安装： vue -V #2.创建项目（这个就跟react创建脚手架项目比较像了） 这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是 让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个 当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键 选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步，这里 演示，我随便选了几个 下一步之后问询
VUE CLI3 小白环境搭建流程及配置
jjxy1213的博客
10-11 296
目录用vue cli3可视化搭建项目开始功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 用vue cli3可视化搭建项...
vue-cli3入门安装配置
林间有风的博客
07-07 627
1.安装 vue create project npm install npm run serve 2.使用axios作为请求库 npm install axios 3.使用sass预编译处理css npm install -D sass-loader node-sass 4.使用style-resources-loader处理全局自动导入(变量、mixin、var) npm install -D style-resources-loader // vue.config.js const pat
vue/cli 3.0配置NODE_ENV
weixin_30768661的博客
07-13 4872
　　原文地址 　　在项目开发中我们需要配置环境变量，开发环境，生产环境和测试环境。在cli 2.0的版本中我们是通过在config文件夹进行配置的，vue/cli 3.0相对简单，只需要在项目根目录创建.env文件即可。以下是环境对应文件名和命令 模式 对应npm命令 对应文件名称 development server .env.developm...
vue-cli开发的商城源代码
01-18
在这个"vue-cli开发的商城源代码"项目中，我们可以看到一系列与前端开发、Vue.js 框架以及构建电商平台相关的知识点。 首先，`vue.js` 是一个轻量级的前端框架，由尤雨溪开发，它的核心特性包括组件化、虚拟DOM、...
vue-cli中的webpack配置详解
08-29
"vue-cli中的webpack配置详解" vue-cli中的webpack配置详解是基于Vue.js框架的项目中最重要的一部分。Vue-cli是一个基于Webpack的项目脚手架，提供了许多有用的功能和配置项，以帮助开发者快速构建和部署Vue.js应用...
详解vue-cli项目开发/生产环境代理实现跨域请求
01-19
开发环境中跨域 使用vue-cli创建的项目，开发地址是localhost:8080，需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要...
vue-cli3中process.env.BASE_URL配置、接口代理以及其他配置
热门推荐
后知后觉
12-05 11万+
  vue-cli3的源码部分：@vue/cli-service/lib/util/resolveClientEnv.js module.exports = function resolveClientEnv (options, raw) { const env = {} Object.keys(process.env).forEach(key => { if (pre...
vite+vue3版本配置全局env及process报错
caijihuzhuoya的博客
02-16 4776
process报错应为标识符,建议安装@type/node
关于process.env.VUE_APP_BASE_URL的使用 -- Vue2
m0_66675766的博客
04-11 8515
是一个 Vue.js 中使用的环境变量，可以用来存储一个应用的基本URL地址，例如 API 服务器的地址。在 Vue CLI 3 以上的版本中，当你在项目根目录下创建一个名为。则是一个自定义的环境变量。这个变量可以在 Vue.js 代码中通过。你可以在 Vue.js 项目的任何地方通过。其中 [mode] 是你的模式名称，例如。的值，那么这个值就会被自动注入到项目中。的值，自动加载对应的环境配置文件，例如。表示当前运行的环境是开发环境。在运行项目时，你就可以使用
Vue 3 配置.env 全局变量
Tongyao
12-15 4624
对应的命令后面 添加 ` --mode dev`用来区分使用哪个环境变量 npm run dev 就是用的开发环境 npm run bulid 用的是生成环境 npm run test 用的是测试环境 还可以在别的js文件中使用环境变量，`process.env.baseUrl` 这里的环境变量会根据当前`npm run dev`命令运行的环境有关，如果没有`process.env.baseUrl` 变量会找其他文件中的`process.env.baseUrl` ......
Vue 环境变量和模式(设置通用baseUrl)
Hebert
03-15 1862
Vue CLI3 中可以通过设置环境变量和模式，可以根据不同模式加载不同的 baseUrl 地址。具体如下： 一、环境变量 1.描述 在 Vue 项目的根目录下可以创建以下文件来设置环境变量 .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的...
vue cli 3 配置分环境打包,配置多环境打包,cross-env没有效果,cross-env在vue-cli 3中的使用
大华阿大华的博客
03-07 5529
vue-cli 3 实现分环境打包vue 分环境打包模式 vue 分环境打包 在开发过程中，可能会遇到这样一个问题，在开发环境，测试环境和生产环境中我们会用到不一样的接口，每次在不同环境中都要手动去切换接口地址，只会很麻烦，有时还可能出现操作失误。这时候就需要用到分环境打包了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。 模式 vue-cli项目下默认有三种模式： develop...
VueCLI 通过process.env配置环境变量
k464746的博客
10-14 1万+
前言 我们在做vue或者react单页应用的时候,会发现配置文件里有procsss.env字段,那么,这个字段有什么含义,代表什么,我们在搭建项目的时候又该如何使用其来配置环境变量,从而在不同的环境下进行不同的配置。 理解node环境变量process.env 首先,我们需要理解node中的process和process.env是什么,点击此处进入Node.js中文网进行查看 在文件夹中新建process.js文件,进行操作,理解process.env process（进程） process 对象是一
【VUE】vue3+vite中process.env的配置方法
emgexgb_sef的博客
02-23 5691
问题详情 在request.js中，使用process.env.BASE_API，需要对请求路径进行全局配置 // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api 的 base_url timeout: 5000 // 请求超时时间 }) 解决方法 在vite.config.js中，添加 define: { 'process.env': { 'BASE_API':"ht
vue3+vite中使用环境变量 .env 的一些配置情况说明
weixin_45547638的博客
10-12 1万+
在项目文件中新建文件.env .env.pro 两个文件其中.env 是默认设置 .env.pro 为正式环境设置。console.log( import.meta.env) //查看相关信息 这里不显示非VITE开头的变量。正常使用的时候没有提示信息，想增加提示信息在vite-env.d.ts或者env.d.ts进行如下配置即可。使用 import.meta.env.VITE_NODE_ENV 获取环境变量。还是使用 process.env.NODE_ENV。
vue-cli-service开发环境怎么打包
最新发布
06-04
Vue CLI 是 Vue.js 官方提供的一个脚手架工具，可以帮助开发者快速搭建 Vue.js 项目开发环境。其中，vue-cli-service 是一个开发环境的命令行工具，可以通过它来构建、启动、调试和测试 Vue.js 应用程序。 要打包 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值