vue2.0多环境打包配置记录

最新推荐文章于 2024-06-13 17:08:26 发布
最新推荐文章于 2024-06-13 17:08:26 发布
阅读量485 收藏 2
点赞数
文章标签： javascript 前端 json vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41944038/article/details/130326124
版权

记录下多环境打包的配置过程（仅仅是打包时候路由不同，开发时是一样的，所以只配置了生产环境，测试环境未配置）

  1. 首先，下载
    npm install cross-env
  2. 在package.json文件中定义打包命令
    package.json
  3. 创建对应的配置文件
    文件名根据package里定义的env_config来命名
    文件名根据package里定义的env_config来命名
  4. config文件夹下的配置在这里插入图片描述
    NODE_ENV 与 ENV_CONFIG要与package里自定的一样
    在这里插入图片描述
    在这里插入图片描述
    config文件下的index.js，主要配置不同环境下的包名，以及生产环境配置文件
    在这里插入图片描述
  5. build文件夹下的配置
    在这里插入图片描述
    主要是修改引入的环境配置文件
    build.js文件
    在这里插入图片描述
    最后修改静态资源的路径
    在这里插入图片描述
无人公寓里的猫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2版本下如何分环境打包
u013994400的博客
10-19 1025
vue2版本下如何分环境打包
vue2配置不同环境打包指令（vue-cli3）
weixin_45606890的博客
12-27 916
vue配置打包指令
vue技巧（十）全局配置使用（打包后可修改配置文件）
最新发布
Interest1_wyt的博客
06-13 1102
vue js或json全局配置使用，打包后保持配置文件不变，支持打包后修改配置文件内容
vue2 多环境配置开发
weixin_43858276的博客
04-11 525
打印 process.env.NODE_ENV 测试下没问题就ok了。
vue配置多环境下多个打包命令
weixin_44161385的博客
02-15 860
vue配置多个打包命令
vue2不同版本下如何分环境打包
剑雪封喉
10-18 1219
vue2不同版本下如何分环境打包
vue-cli2多环境打包配置
luoyu19940615的博客
05-27 2835
背景：框架vue2+工具vue-cli2，项目需要打包两个角色，三个运行环境：本地，测试，生产， 上线发布有的直接在根目录下，有的需要在二级目录下。 一、增加打包配置文件 1、config文件夹增加4个环境变量文件，build文件夹增加7个打包配置文件 2、新增环境变量文件： 添加规则按照已有环境变量添加即可，名字自己取，最好见名知意，图中的APP_USER_TYPE自定义，如果需要更多自定义变量自行增加即可。 3、新增build文件：拷贝已有build文件，修改process.env.N
vue2.0+webpack环境的构造过程
09-01
在构建Vue 2.0应用时，Webpack是一个强大的模块打包工具，它可以帮助我们将各种资源（如JavaScript、CSS、图片等）进行编译和优化。在本教程中，我们将逐步搭建一个基于Vue 2.0和Webpack的开发环境。 1. **创建项目...
SpringBoot+Maven+Vue2.0实现简单的CRUD
01-24
在本项目中，我们主要利用SpringBoot、Maven和Vue.js 2.0来构建一个具备基本CRUD（创建、读取、更新、删除）功能的前后端分离的应用。下面将详细阐述这些技术以及如何结合它们来实现项目目标。 1. SpringBoot： ...
vue2.0仿饿了么实战代码
12-07
【Vue2.0仿饿了么实战代码】项目是一次基于Vue.js 2.0框架实现的电商应用实践，旨在帮助开发者深入理解Vue的核心特性和实际应用。该项目结合了前端开发中的常见技术栈，如Vue组件化开发、路由管理、状态管理等，同时...
详解用webpack2.0构建vue2.0超详细精简版
08-30
本文将详细讲解如何使用Webpack 2.0搭建Vue 2.0项目，这是一个简洁而全面的教程，旨在帮助开发者快速入门。首先，我们通过`npm init -y`初始化项目，这将创建一个`package.json`文件，记录项目的依赖信息。 接下来...
vue+webpack多页面打包
01-27
vue+webpack多页面打包项目配置，项目中需要有多个页面，所以就有了vue的多页面打包。
blog:基于expresss+vue2.0+vue-router 个人博客
05-10
【标题】：“基于Express + Vue2.0 + Vue-Router 的个人博客搭建教程” 这篇教程主要涉及的技术栈是Express、Vue.js（版本2.0）以及Vue-Router，这些都是JavaScript领域的核心工具，用于构建高性能的Web应用。...
vue2.0 项目打包上线，自定义打包配置
m0_53251830的博客
09-18 1854
vue2.0 项目打包上线，自定义打包配置
VUE2 分环境打包及开发
羽茉的博客
04-23 550
VUE2 分环境打包及开发
不同vue版本下如何分环境打包
weixin_40943147的博客
04-13 1755
前言 假如你的Vue项目需要在多个服务器部署，若使用代理的模式，每个环境都需要先改IP地址及端口，再打包，非常的麻烦 vue2版本（基于webpack）的动态ip及端口分环境打包 在public目录下，新建config.js文件 在config.js文件中编写对应的分别打包环境 把config.js在index.html中引入 创建对应的 .env.dev ， .env.sit ， .env.prod 三个环境 在每个环境中写入对应的环境变量 处理package.json中的sc
Vue配置多环境
酸酸酱的博客
03-28 2786
需求 我们在使用vue的过程中，最终部署到web容器中时候，可能会需要部署到多个环境，比如有开发环境、测试环境、生产环境等，他们的接口访问地址可能会不一样，比如测试环境可能是http://test*，生产是http://*product/，那么在vue中发送请求已经写好了访问地址，是不是要根据不同环境而在文件中修改代码呢？这样是及其不好的，本文就是为了解决这个问题，通过执行不同的命令来打包，而不是...
vue 分环境打包
rhcjqmm666的博客
12-01 2196
vue 分环境打包
vue 多环境配置
fk129
08-24 327
实际情况下我们用vue-cli脚手架生成的项目，可能部署在不同环境下运行，如开发环境、测试环境、生产环境；那接口地址等可能有所改变，我们不能每次手动修改文件里的地址。那么可以配置多环境 1. package.json添加test打包命令 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "uni
vue2.0 多页面 分开打包命令
07-14
总结起来，实现Vue2.0多页面分开打包的命令，主要包括以下几个步骤：新建多个页面目录，修改webpack配置，修改index.html文件，运行打包命令。 ### 回答3： 在Vue 2.0中，如果我们需要进行多页面开发，可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值