vue 通过编译命令加载不同的环境配置

最新推荐文章于 2024-04-19 18:28:41 发布
最新推荐文章于 2024-04-19 18:28:41 发布
阅读量552 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuss_ujn/article/details/111478564
版权

1.添加环境配置文件，如.env.test和.env.meet两个文件

2.在package.json文件中添加命令，注意   “--mode xxx”

3.命令行运行npm run test，加载env.test中的配置；运行npm run online，加载.env.meet中的配置

如下：

 

 

扮老虎的猪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue cli 通过命令行传参实现多环境配置
10-18
主要介绍了vue项目通过命令行传参实现多环境配置(基于@vue/cli)的相关资料,需要的朋友可以参考下
浅析vue给不同环境配置不同打包命令
10-18
本文分步骤给大家介绍vue给不同环境配置不同打包命令的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
.vue文件的编译
小何程序员的博客
02-10 6546
前言 本文章我们来分析一下在vue2当中是如何编译.vue文件 （本文仅简单的框架的分析具体深入原理可查看参考文献） 探究 我们先尝试引入.vue文件，然后输出看看输出的内容 代码如下： main.js文件 import App from './App.vue' console.log(App) 输出的结果为 App.vue文件 <template> <div id="app1"> <img alt="Vue logo" src="./assets/logo.p
vue项目按环境类型设置不同的IP地址等配置信息（附process.env常见问题）
风海洋的博客
10-05 1319
vue项目按环境类型设置不同的IP地址等配置信息（附process.env常见问题）
vue相关配置文件详解及多环境配置
jdkss的博客
05-15 8473
1.package.json 作用： package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。 文件结构如下： { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <[email protected]>", "description": "sop-vue", "k
VUE项目使用.env配置多种环境以及如何加载环境
最新发布
CVPR收割机的博客
04-19 963
build:stage”: “vue-cli-service build --mode staging”，使用npm run build:stage指令时会在 staging 模式下加载可能存在的 .env、.env.staging 和 .env.staging.local 文件，此时NODE_ENV 的值将被覆盖为 production，而不是 staging然后构建出生产环境应用。NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。
VUE配置多开发环境/静态配置文件修改地址
lranqi的博客
07-26 2509
在vue-cli中可以使用.env文件配置不同的开发环境，切换不同部署地址。NODE_ENV='production'VUE_APP_BASE_API='/api'.配置开发环境代理,为每一个接口地址加上的/api前缀，这里再通过配置开发环境代理设置代理地址并重写URL。devServer: {proxy:{}}使用window对象，通过外部配置文件显示修改请求。可以在 window 对象上存储数据或属性，并在整个页面中访问它们。
VUE工程不同环境配置及自定义环境值
Dream - to be coder
03-23 460
vue不同环境配置及变量定义
Vue 教程(三十八)配置文件环境分离
yuan_xw的专栏
08-10 612
Vue 教程(三十八)配置文件环境分离 修改配置文件 在项目根目录下新建文件夹【build】，在该目录下新建三个文件分别为：【base.config.js】、【prod.config.js】【dev.config.js】 base.config.js 内容如下： // 导入Node中path常量 const path = require("path"); const webpack = require("webpack"); const HtmlWebpackPlugin = require("ht
vue中配置webpack不同环境下的域名及参数
IT水很深，路还很长
07-14 1301
vue中配置webpack不同环境下的域名及参数 假设一个项目 需要有开发环境(dev), 测试环境(test), 正式环境(prod), 并且三种环境都要build打包的需要; 前提是已通过vue-cli初始化了项目; 1.先在page.json中配置脚本命令 // 开发环境启动 "serve:dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", //测试环境启动 "serve:test"
详解vue 不同环境配置不同的打包命令
12-11
最近做的一个项目是配置了三个环境的：正式环境、测试环境和开发环境，下面以这个为例 第一步：安装cross-env npm i --save-dev cross-env 或者在 package.json中加上”cross-env”: “^5.0.1″进行安装依赖 package.json: //这是我项目的目录 第二步：修改各环境下的参数 在config/目录下添加test.env.js、develop.env.js。并且修改文件里的内容 config/prod.env.js config/develop.env.js 第三步：更改build文件夹的东西 1.给buil
Vue 常用的指令
qq_42753091的博客
08-14 1062
1. v-text 和 v-html 、v-pre 2. v-cloak 3. v-once 4. v-model 5. v-on 6. v-bind 2. v-bind:style 7. v-for 8. v-if 和 v-show 9. 自义定组件
Vue项目中使用.env配置多种环境
Komorebi_00的博客
08-19 1182
因此，如果我们运行npm run serve 在就先加载.env文件，之后加载.env.development文件，如果两个文件有相同的变量名，则后加载的文件就会覆盖掉第一个文件，也即是.env.development文件覆盖掉了.env文件的NOOE_ENV选项。属性必须以VUE_APP_开头，后边可以使用任意名字结尾，在代码中使用process.env即可访问到定义的环境变量。全局默认配置文件，不论什么环境都会加载合并。开发环境下的配置文件，使用。生产环境下的配置文件，使用。时默认会加载此配置文件。..
vue不同环境基本文件配置
weixin_70641414的博客
04-18 297
本地开发请求地址配置方式： 在项目根目录（与package.json文件平级目录）创建 .env.development 文件 内容： NODE_ENV = "development" VUE_APP_BASE_API = '请求地址' 测试环境请求地址配置方式： 在项目根目录（与package.json文件平级目录）创建 .env.staging 文件 内容： NODE_ENV = "staging" VUE_APP_BASE_API = '测试请求地址'
前端(React、Vue)多环境配置
大灰狼的小绵羊哥哥的博客
07-23 1759
在一个正常的迭代周期内，一般会经历开发、测试、生产3个阶段，每个阶段都需要一个独立的环境，再加上某些特殊需求需要增多几个环境(如嵌入到其他应用下、迭代有新的阶段)，如果没有一个好的多环境管理方案，那么就会出现代码强耦合、切环境操作复杂等问题...
[配置]VUE中通过process.env判断开发，测试和生产环境，并分环境配置不同的URL HOST
tom_wong666
05-02 2万+
需求： VUE开发前端项目，需要分环境配置URL和做相关处理 思路：通过process.env做判断和处理 实现一：环境区分 1，找到项目配置文件夹： config文件夹 2，进入如下三个文件： dev.env.js 对应开发环境 test.env.js 对应测试环境 prod.env.js 对应生产环境 找到如下代码： // 开发环境 module.exports = merge(prodEn...
vue配置多个运行环境、打包环境，通过运行指令切换环境，通过切换环境控制对应环境的参数
mrliucx的博客
04-29 6014
01.配置环境 1.创建开发环境、测试环境、生产环境文件 2.给文件配置接口基础API，添加对应环境的所需参数，以生产环境为例 02.静态参数值跟随环境变化 1.环境配置文件中添加了两个参数（代理、websocket） #开发环境nginx代理路径 VUE_APP_BASE_URL = 'manage-web-dev' #开发环境websocket VUE_APP_WEBSOCKET = '192.168.xx.xx:8080' 2.添加的环境参数为VUE_APP_BASE_URL、VUE_APP_
Vue中.env|.env.development|.env.production文件说明
热门推荐
Amelian的博客
04-17 3万+
0.介绍 模式是Vue CLI项目中一个重要的概念，默认情况下，一个Vue CLI项目有三种模式： developemt 模式用于vue-cli-service serve test 模式用于vue-cli-service test:unit production 模式用于vue-cli-service build 和vue-cli-service test:e2e 当运行vue-cli-service命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含NODE_ENV变量，它的值取决
vue2 cli不同命令启动不同环境
03-31
Vue CLI 2.x版本： 1. 开发环境：`npm run dev` 2. 生产环境：`npm run build` Vue CLI 3.x版本： 1. 开发环境：`npm run serve` 2. 生产环境：`npm run build` 在Vue CLI 3.x版本中，我们也可以通过设置不同的环境变量来启动不同的环境，例如： 1. 开发环境：`npm run serve -- --mode development` 2. 生产环境：`npm run build -- --mode production` 其中，`--mode`参数后面的值为环境名称，可以根据实际情况自定义。在项目中，我们可以通过`process.env.NODE_ENV`来获取当前的环境。例如，在`main.js`中可以这样写： ```javascript if (process.env.NODE_ENV === 'production') { // 生产环境代码 } else { // 开发环境代码 } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值