vue分环境打包经验总结

最新推荐文章于 2024-05-20 17:46:32 发布
最新推荐文章于 2024-05-20 17:46:32 发布
阅读量382 收藏 1
点赞数
分类专栏： 配置 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38212421/article/details/113921197
版权
本文总结了Vue项目中如何设置和管理不同环境（本地、预发、生产、测试），通过创建.env文件配置环境变量，并在Vue Cli中进行相应设置。介绍了如何根据process.env.VUE_APP_CURENV动态调整接口URL，以及在vue.config.js中配置代理和打包文件名。同时提到了vue-cli 3.0和4.0的环境变量配置示例。
摘要由CSDN通过智能技术生成

  1. 首先新建四个文件，分别是本地环境，预发环境，生产环境，测试环境
    四个环境

  2. 这里我以注释分割，你们写的时候是分开文件分别写

//.env.dev:
NODE_ENV = 'development'
VUE_APP_CURENV = 'dev'
//.env.pretest
NODE_ENV = 'production'
VUE_APP_CURENV = 'pretest'
//.env.production
NODE_ENV = 'production'
VUE_APP_CURENV = 'prod'
//.env.test
NODE_ENV = 'production'
VUE_APP_CURENV = 'test'

注意：Vue Cli 项目中有三种模式：development（开发模式）、production（生产模式）、test（测试模式）。注意模式不同于NODE_ENV，一个模式可以包含多个环境变量。除了 NODE_ENV 和 BASE_URL，其他的环境变量必须以 VUE_APP_ 开头
项目中使用：process.env.环境变量名，eg：VUE_APP_BASE_URL

3.在package.json里面加上对应的命令

"scripts": {
最低0.47元/天 解锁文章
手可摘星辰~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0下配置多环境打包
twoyaotian的博客
09-01 885
首先在项目根目录下新建3个文件 ①.env.testt配置（就是测试环境） NODE_ENV = ‘test’ VUE_APP_CURENV = ‘test’ ② .env.development配置（就是开发环境） NODE_ENV = ‘development’ VUE_APP_CURENV = ‘development’ ③ .env.production配置（就是生态环境及线上环境） NODE_ENV = ‘production’ VUE_APP_CURENV = ‘production’ 其次在
vue-cli3环境变量与分环境打包
weixin_34085658的博客
02-15 1264
第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # ...
vue 区分多环境打包
最新发布
细节怪的博客
05-20 504
区分不同的环境（测试、正式环境）
vue-cli3实现分环境打包步骤（给不同的环境配置相对应的打包命令）
weixin_34221073的博客
07-19 611
在vue-cli3的项目中， npm runserve时会把process.env.NODE_ENV设置为‘development’； npm run build时会把process.env.NODE_ENV设置为‘production’； 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 头疼的是打包时线上环境可能分多种...
VUE3.0分环境部署
wolf
07-01 513
在vue-cli3的项目中， npm runserve时会把process.env.NODE_ENV设置为‘development’； npm run build时会把process.env.NODE_ENV设置为‘production’； 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 具体步骤如下： 1.package....
vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js
热门推荐
冲锋
08-25 4万+
vuecli3.0 创建项目步骤略过 这里我选的是 (vue-router, vuex, stylus, babel, unit-mocha, e2e-cypress) 进行测试 项目安装完成后目录 在目录里加入了3个文件 分别是本地，测试，和 开发的 环境接口 在.env文件下: 使用VUE_APP_URL = “接口url” 书写格式：VUE_APP_[z自定义nam...
Electron + vue 打包桌面操作流程详解
10-16
在开发桌面应用时，Electron 和 Vue.js 的结合提供了一种强大的解决方案。本文将深入探讨如何使用这两个技术栈进行打包，以便创建桌面应用程序。...持续学习和实践，你将能更好地掌握Electron + Vue的打包技术。
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
11-21
由于这次项目是在初学 Vue 之后的第一个正式项目，没有考虑到类似 路由懒加载、 按需加载的问题 ，所以呢，也算是没经验。 到了这些天，项目写得差不多了，准备放到服务器测试，才发现这个问题。 优化前： app.js ...
全新打包工具parcel零配置vue开发脚手架
11-30
【全新打包工具Parcel与Vue开发脚手架】 Parcel是一款新兴的、零配置的前端构建工具，旨在简化Web应用的构建过程。与传统的Webpack等构建工具相比，Parcel的主要优势在于其开箱即用的特性，无需繁琐的配置文件，极...
vue.js 课件 ppt
11-03
在这个章节，你会了解到如何通过CDN链接、npm安装或者使用Vue CLI来设置项目环境。同时，还将学习Vue实例的创建以及如何在HTML模板中使用`<template>`、`<script>`和`<style>`标签。 第2章“Vue数据绑定”是Vue.js...
vue+iview+less+echarts实战项目总结
08-28
在本文中，作者分享了基于Vue、iView、Less和ECharts开发实战项目的心得体会，以下是关于这些技术栈的一些关键知识点和经验总结： 1. **Vue与iView的结合使用**： Vue是一个轻量级的前端框架，提供组件化开发能力...
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
11-19
你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader： # Sass npm install -D sass-loader node-sass # Less npm install -D less-loader less # Stylus npm install -D stylus-loader stylus 然后你就可以导入相应的文件类型，或在 *.vue 文件中这样来使用： <style scoped lang="stylus"> .
vue3.0多环境打包及不同api接口运行
qcg14774125的博客
11-29 1848
由于项目有很多环境，所以不便再使用每次改接口名字，于是用到了了多环境打包问题，首先在项目根目录下新建几个文件 其中.env配置（就是测试环境）为 NODE_ENV = 'test' VUE_APP_CURENV = 'test' .env.development配置（就是开发环境）为 NODE_ENV = 'development' VUE_APP_CURENV = 'devel...
vite+vue3.0分割打包
weixin_45969830的博客
06-17 7873
@井底的蜗牛 https://blog.csdn.net/weixin_41277748/article/details/116431789#comments_16705971 ![打印形参id](https://img-blog.csdnimg.cn/2021061718272993.png 打印参数id查看有哪些依赖 //使用vue3+vite2创建项目时,刚创建的时会看到让你选择一些依赖，这些依赖是vue自己加入，如果你选择了，创建好后进行下载依赖包然后进行打包(vue3内部使用的是roll
vue3 分模块打包 可单个模块打包，或者所有资源一起打包部署
qq_36958916的博客
11-01 4838
vue3 分模块打包 可单个模块打包，或者所有资源一起打包部署
使用变量process.env.VUE_APP_BASE_API
weixin_40030173的博客
03-11 2万+
使用变量process.env.VUE_APP_BASE_API进行取值。 在js文件中直接使用 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 10000, }) 1.Vue2.0页面写法 通过data定义 <template> <div> <a :href="this.uploadUrl">点击</a> </
vue根据环境不同配置不同的打包命令（史上最简单）
qq_34215737的博客
11-04 4313
前提：各种vue环境已经配置完毕，vue-cli脚手架安装好。 1.在项目根目录创建如下图所示三个文件，分别取名为 .env.development .env.production .env.test 2.然后在这三个文件里依次写入如下内容： NODE_ENV = ‘development’ VUE_APP_CURENV = ‘development’ NODE_ENV = ‘production’ VUE_APP_CURENV = ‘production’ NODE_ENV = ‘test’ VUE
vue配置dev、test、pro环境，实现分环境打包
weixin_46192027的博客
08-24 5824
vue配置dev、test、pro环境，实现分环境打包 使用vue-cli开发项目时，默认自带的环境有development（开发环境）、production（生产环境），在最近开发的一个项目中，后端是由.net和java共同开发的，为了适应和提高多环境多域名的打包配置效率，前端需要分环境配置不同的打包命令；下面就来讲讲如何配置test环境，实现测试环境的一键打包命令：npm run test。 1、package.json文件中新增命令行脚本test命令,并指向build文件夹下的test.js。 2、
Vue-cli3 中，配置开发环境、测试环境、预发环境、生产环境等环境下的打包 (以预发环境为例)
Sue's blog
04-23 955
package.json**的scripts中添加 “pre”: “vue-cli-service build --mode pre” 在项目根目录添加文件“.env.pre”，其内容： NODE_ENV = 'pre‘ 相当于 NODE_ENV = 'production' VUE_APP_TITLE = 'pre'//（通过改变process.env.NODE_ENV值区分打包环境，...
Vue.js内网部署经验：渐进式框架与MVVM实践
**Webpack或Vue CLI**是常见的构建工具，它们可以自动化处理Vue项目中的模块打包、压缩、热重载等任务，优化应用的性能和开发流程。 **单元测试和端到端测试**在Vue.js中也是重要的实践环节。Vue Test Utils和Jest...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值