vue-cli配置开发、测试、生产环境

最新推荐文章于 2024-04-29 17:05:01 发布
最新推荐文章于 2024-04-29 17:05:01 发布
阅读量2.7k 收藏 6
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43891448/article/details/107370738
版权
NODE_ENV = 'development'VUE_APP_MODE = 'development'VUE_APP_API_URL=https://aoutputDir = testNODE_ENV:可以设置为其他值，比如"test",但是打包后的目录结构和"production"不一样，所以还是设置为"production",通过"VUE_APP_MODE"变量来区分环境VUE_APP_MODE:线上测试环境VUE_APP_API_URL:api调用地址outputDir:打包生成..
摘要由CSDN通过智能技术生成

在这里插入图片描述

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL=https://a
outputDir = test

NODE_ENV:可以设置为其他值，比如"test",但是打包后的目录结构和"production"不一样，所以还是设置为"production",通过"VUE_APP_MODE"变量来区分环境
VUE_APP_MODE:线上测试环境
VUE_APP_API_URL:api调用地址
outputDir:打包生成的文件夹名称，默认是'dist'
开发环境（.env）
NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL=https://a
测试（.env.test）
NODE_ENV = 'production'
VUE_APP_MODE ='test'
VUE_APP_API_URL=https://y
outputDir = test
修改vue.config.js中的打包输出目录

最低0.47元/天 解锁文章
冷风的代码
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue/cli4配置测试环境
qq_29236119的博客
03-31 477
一、使用Vue/cli4创建项目之后，打开package.json查看npm run命令只有三个命令，如下： npm run serve: 开发环境 npm run build: 生产环境 npm run lint: 貌似是针对eslint 二、这个时候发现只有开发和生产环境并没有测试环境，接下来配置一个测试环境，如下： 1、首先再项目跟目录新建一个.env.test 文件表示测试环境，如下： 2、.env.test中配置如下： NODE_ENV = 'testing' //环境标识 VUE_APP_
Vue cli的环境搭建
weixin_48371589的博客
09-17 670
Vue cli 随着vue.js越来越热门，更多的项目都用到vue进行开发，大多数公司选择脚手架开发，因为快捷方便，开发中周期短，开发人员学习成本低。 开发环境搭建 1.1 node环境 http://nodejs.cn/ 搭建vue开发环境之前必须先安装node环境 1、使用win+r ,输入cmd ,按回车按钮，进入命令提示符窗口，输入：node-v回车，看到有相对应的版本。 1.2 vue脚手架搭建 1、vue cli 是安装vue的脚手架工具，也是vue官方命令行工具，可以用来快速创建项目。 2
vue之搭建cli环境
超域的博客
10-16 250
1.v-model绑定input中的value值 2.安装vue-cli (1).安装node.js (2)安装 vue-cli 安装好了 node，我们可以直接全局安装 vue-cli： npm install -g vue-cli 3.首先需要在命令行中进入到项目目录，然后输入： vue init webpack Vue-Project 然后进入项目目录...
vue中配置 测试、准生产、生产环境
最新发布
weixin_44837958的博客
04-29 307
节后调用获取配置参数。
VueCli环境搭建
cgl_dong的博客
09-13 315
VueCli环境搭建 VueCli是Vue提供的脚手架，可以帮助我们快速搭建Vue应用，对前后端分离，模块化开发，SPA应用提供便捷的操作。 VueCli基于Vue，需要Node环境。同时需要Webpack工具辅助。默认已经安装node环境 vueCli需要node环境的支持，其中的npm包管理工具可以帮助我们搭建Vue脚手架. 1、淘宝cnpm 国外的npm有时速度太慢，所以有时我们使用...
vue cli 测试环境，开发环境，正式环境 配置
qq_40341527的博客
07-13 253
npm install process 项目根目录新建三个文件 .env.test 测试环境 .env.devlopment 开发环境 .env.production 正式环境 package.json修改 "scripts": { "serve": "vue-cli-service serve --mode devlopment", "pro": "vue-cli-service build --mode production", "start": "vu...
vue-cli脚手架-bulid下的配置文件
08-27
环境变量用于配置项目的开发、测试和生产环境。依赖项则用于配置项目的依赖模块，例如Vue.js、Webpack、ESLint等。 六、总结 Vue-cli脚手架bulid下的配置文件是Vue.js开发过程中的一部分，主要用于配置项目的结构...
vue-cli配置环境变量的方法
12-12
在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常...
vue-cli3 配置开发与测试环境详解
10-16
主要介绍了vue-cli3 配置开发与测试环境详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli3分环境打包
01-20
分环境打包对于现代前端项目至关重要，因为不同的环境（开发、测试、生产）可能需要不同的配置，比如 API 域名、日志等级、错误处理等。 在 Vue CLI 3 中，我们可以通过 `package.json` 文件中的 `scripts` 部分...
vue-cli3.0 环境变量与模式配置方法
10-17
环境变量和模式在前端开发中扮演着重要的角色，因为它们帮助我们在不同环境下管理配置，如本地开发、测试、预上线和生产环境。 **环境变量配置** Vue CLI 3.0 提供了四种方式来设置环境变量： 1. `.env` 文件：...
vue-cli项目配置多环境的详细操作过程
12-10
vue-cli 默认只提供了 dev 和 prod 两种环境。但其实正真的开发流程可能还会多一个 sit 或者 stage 环境， 就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量 ...
安装vue-cli的简易过程
12-11
总的来说，Vue CLI为Vue.js开发者提供了一个高效、便捷的开发环境，使得创建和管理Vue项目变得更加简单。通过上述步骤，你已经掌握了安装Vue CLI的基本流程，以及如何使用它来初始化和运行一个Vue项目。在实际开发中...
vue-cli3中配置alias和打包加hash值操作
11-19
总的来说，通过在Vue CLI 3中正确配置alias和hash值，可以优化项目的构建过程，提高开发效率，并有效地管理浏览器缓存。理解hash、chunkhash和contenthash的区别，有助于更好地控制webpack的打包策略，避免不必要的...
vue-cli3-template：基于Vue-cli3建造的脚手架项目模板
01-31
项目介绍基于Vue-cli3建造的前端开发脚手架项目模板，主要包括以下内容：Webpack4.x性能调优配置，Vue.js全家桶，移动端vw适应，单元测试等功能，可以参考，欢迎大家围观指教！项目特点特征 巴别塔 VueRouter 威克斯...
vue-cli.rar
12-24
4. **性能优化**：Vue CLI 自动配置了生产环境的优化选项，如代码分割、按需加载、压缩和最小化，以及Tree Shaking等，以确保应用的运行效率。 5. **配置可调整**：虽然提供了默认配置，但Vue CLI允许开发者根据...
9.0、vue-cli环境配置超详细教程
m0_52433668的博客
02-27 1185
9.0、vue-cli环境配置超详细教程 第一步：进入http://nodejs.cn/download/ 官网下载 第二步：安装，无脑点击下一步即可，安装的位置可以自行选择 第三步：以管理员身份打开命令提示符窗口，输入以下代码查看版本、以及是否安装成功 node -v npm -v 第四步：安装Node.js淘宝镜像加速器(cnpm) 这样子的话，下载会快很多！ # -g就是全局安装 npm install cnpm -g #或使用...
Vue CLi 2.x 开发环境搭建
weixin_33875839的博客
02-28 778
Vue.js作为目前国内最火的前端开发框架之一，本文将介绍如何通过Vue-cli搭建Vue.js的前端开发框架。目前Vue-cli已经发展3.x，不过考虑很多开发依旧是在2.x框架上进行的，所以本文还是先介绍Vue-cli 2.x框架的搭建，之后会出3.x框架的搭建教程。1.安装Node JS首先需要在本机安装NodeJS，这是Vue开发的基础环境，Nodejs的官网：nodejs.org/en/...
vue全家桶（二）vue-cli增加测试环境
书生
12-19 534
1.添加测试环境的配置testBuild 修改config/index.js文件，创建testBuild对象，内容和build对象基本一样，只是将打包后的文件夹改为dist-test testBuild: { // Template for index.html index: path.resolve(__dirname, '../dist-test/index.html'), ...
vue-cli 配置多环境
08-15
你可以通过以下步骤来配置多环境： 1. 创建不同的环境配置文件：在你的项目根目录下创建不同的环境配置文件，例如： - `.env.development`：开发环境配置 - `.env.staging`：测试环境配置 - `.env.production`：生产环境配置 2. 配置环境变量：在每个环境配置文件中，设置对应的环境变量。例如，在`.env.development`中，你可以设置以下内容： ``` VUE_APP_API_URL=http://localhost:8080/api ``` 3. 使用环境变量：在你的代码中，可以使用`process.env.VUE_APP_API_URL`来访问相应的环境变量。例如，在 Vue 组件中： ```vue <template> <div> API URL: {{ apiUrl }} </div> </template> <script> export default { data() { return { apiUrl: process.env.VUE_APP_API_URL } } } </script> ``` 4. 配置构建命令：在`package.json`文件中的`scripts`部分，配置不同环境的构建命令。例如： ```json { "scripts": { "serve": "vue-cli-service serve", "build:dev": "vue-cli-service build --mode development", "build:staging": "vue-cli-service build --mode staging", "build:prod": "vue-cli-service build --mode production" } } ``` 这样，你就可以使用不同的命令来构建不同环境的应用了。例如，运行`npm run build:dev`将使用开发环境配置进行构建。 希望对你有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值