广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue cli3 实现分环境打包的步骤
  • 571
分享到

vue cli3 实现分环境打包的步骤

2024-04-02 19:04:59 571人浏览 泡泡鱼
摘要

用cli3搭建的Vue项目号称零配置文件,为了方便打包(不用手动来回改不同环境进行打包)那么我们在需要打包的时候分不同环境打包怎么办呢 1.在根目录下创建三个配置文件,如下图 这里

用cli3搭建的Vue项目号称零配置文件,为了方便打包(不用手动来回改不同环境进行打包)那么我们在需要打包的时候分不同环境打包怎么办呢
1.在根目录下创建三个配置文件,如下图

在这里插入图片描述

这里我创建了三个,这三个分别是我的 本地;离线;线上环境 ,三个文件的内容依次为下VUE_APP_TITLE要对应当前文件后缀,build 对应的production


node_ENV = 'production'
VUE_APP_TITLE = 'alpha'
====================================================================
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
====================================================================
NODE_ENV = 'production'
VUE_APP_TITLE = 'online'

2.package.JSON配置对应环境打包名称,如图所示:

在这里插入图片描述

3.如图所示

在这里插入图片描述

4.在接口拦截文件,如图所示:

在这里插入图片描述

5.配置完以后三个环境打打包方式分别如下:
app打包离线环境:npm run alpha
app打包本地环境:npm run build
app打包正式环境:npm run online

到此这篇关于vue cli3 实现分环境打包的步骤的文章就介绍到这了,更多相关vue cli3 分环境打包内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue cli3 实现分环境打包的步骤

本文链接: https://www.lsjlt.com/news/121550.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue cli3 实现分环境打包的步骤
    用cli3搭建的vue项目号称零配置文件,为了方便打包(不用手动来回改不同环境进行打包)那么我们在需要打包的时候分不同环境打包怎么办呢 1.在根目录下创建三个配置文件,如下图 这里...
    99+
    2022-11-11
  • 如何在vue cli3中实现分环境打包
    如何在vue cli3中实现分环境打包?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。在根目录下创建三个配置文件,如下图这里我创建了三个,这三个分别是我的 本地;离线;线上环...
    99+
    2023-06-09
  • 如何实现Vue项目分环境打包
    小编给大家分享一下如何实现Vue项目分环境打包,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!第1步:安装cross-env在项目...
    99+
    2022-10-19
  • vue-cli3配置多项目并按项目分别实现打包
    目录vue-cli3配置多项目并按项目分别打包项目结构vue.config.js相关配置注意最后一步补充:开发环境如何进入不同项目环境总结vue-cli3配置多项目并按项目分别打包 ...
    99+
    2023-01-14
    vue-cli3配置多项目 vue-cli3打包 vue-cli3配置
  • TypeScript环境搭建的实现步骤
    目录1. 安装TS环境2. 安装 ts-node3. 安装nodemon4. Parcel打包支持浏览器运行TS文件前提是已经装好了node.js,node.js安装图文教程&nbs...
    99+
    2022-11-12
  • Vue项目打包部署到GitHubPages的实现步骤
    目录前言前期准备重要说明步骤1步骤2步骤3步骤4步骤5步骤6前言 关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再...
    99+
    2022-11-13
  • vue项目打包部署跨域的实现步骤
    目录1.前端工程解决办法1.1开发时候解决办法1.2打包部署后解决办法2.后端工程解决办法跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过...
    99+
    2023-05-20
    vue 打包部署跨域 vue 打包跨域
  • vue项目打包以及优化的实现步骤
    目录vue项目的打包上线及优化vue项目的打包项目托管项目的常见优化vue项目的打包上线及优化 项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项...
    99+
    2022-11-12
  • Qt项目打包的实现步骤
    目录准备项目文件用InstallShield解决打包后自动启动cmd窗口的问题准备项目文件 本质上就是把依赖的动态库放到你指定的文件夹里面去;这样在其他电脑上运行时,就不需要再安装q...
    99+
    2022-11-13
  • Maven打包上云的实现步骤
    目录1 修改配置文件2 本地打包运行2.1 打包2.2 运行jar包3 上云(飞天)1 修改配置文件 首先修改pom配置文件(添加maven打jar包插件),添加如下代码: <...
    99+
    2022-11-13
  • jenkins分环境部署vue/react项目的方法步骤
    vue/react部署请参考上一篇文章:https://www.jb51.net/article/238583.htm 项目开发正常都需要开发环境、测试环境、生产环境,每个环境部署都...
    99+
    2022-11-13
  • Vue-CLI多页分目录打包的步骤记录
    页面目录结构 注意需要将默认的 html 模板文件 public/index.html  移动到根目录下。 安装依赖 npm i --save-dev cross-en...
    99+
    2022-11-12
  • MacBook M1 Flutter环境搭建的实现步骤
    目录一、基础环境搭建 git:Flutter SDK:CocoaPods:二、安装IDEIDEA:Xcode:AndroidStudio:三、跑一个app试试最近入手了Ap...
    99+
    2022-11-12
  • pyinstaller打包django项目的实现步骤
    安装pyinstaller pip install pyinstaller 制作项目的.spec文件   进入django项目所在路径,运行 pyi-makes...
    99+
    2022-11-12
  • conda配置python虚拟环境的实现步骤
    目录一、创建python虚拟环境二、配置刚创建的虚拟环境pytorch安装(gpu版本和cpu版本的安装)三、将虚拟环境配置到相应项目一、创建python虚拟环境 首先选中要配置环境...
    99+
    2023-03-19
    conda配置python虚拟环境 conda配置python环境
  • VS2022+unity3D开发环境搭建的实现步骤
    目录1 安装 Unity2 使用 Visual Studio 调试1 安装 Unity 安装Unity Hub 安装 Unity 推荐使用 Unity Hub 管理程序(官方管理程序...
    99+
    2022-11-13
  • vscode搭建java开发环境的实现步骤
    目录前言一、安装Java Extension Pack插件二、配置全局的Java与Maven三、开始创建Maven项目四、配置该项目的settings.json五、补全项目结构代码与...
    99+
    2023-03-07
    vscode搭建java环境 vscode java搭建环境
  • TypeScript环境搭建的实现步骤是什么
    TypeScript环境搭建的实现步骤是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1. 安装TS环境进入到要项目文件夹中,使用 npm init --yes 初始化...
    99+
    2023-06-26
  • Docker+Nginx打包部署前后端分离步骤实现
    目录问题描述项目打包前端项目打包修改vue.config.js文件router配置中添加base属性打包前端项目后端项目打包将前端和后端的打包文件上传到服务器nginx反向代理配置后...
    99+
    2023-01-08
    Docker Nginx前后端分离 nginx前后端分离
  • VSCODE+cmake配置C++开发环境的实现步骤
    1.引言 在实习期间,感受到在vs code上编程的优势(实习期间主要写的lua脚本),因此想把C++和python的开发也迁移到vs code上。如果只运行一个简单的.cpp文件,...
    99+
    2022-11-11
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作