vue一次打包适应多个地址

最新推荐文章于 2023-10-27 13:36:02 发布
最新推荐文章于 2023-10-27 13:36:02 发布
阅读量542 收藏 1
点赞数 1
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/zhanghao1799/p/10578168.html
版权

　　最近遇到的问题，vue打包后，写在代码里的IP访问地址不能满足一次打包，多个地址使用。

　　在网上找的，配置prod，dev之类的，需要用打包命令做区分，还是需要做多次打包，不太满足期望。最终找到了解决方法。做一下记录。

　　1.创建config.json

在static目录下创建文件，config.json。

内容如下：

{
最低0.47元/天 解锁文章
denghong6543
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue-cli3多环境打包配置
10-17
在项目的根目录下，我们可以创建多个以 `.env` 开头的文件，如 `.env.development`, `.env.test`, `.env.production` 等。这些文件用来定义不同环境下的变量，所有以 `VUE_APP_` 开头的变量都会被注入到 Vue 应用中...
vue项目页面内容不同打包出不同的两个包
null0112358的博客
04-30 952
vue项目页面内容不同打包不同 项目的登录页是微信登录,也可以通过演示按钮直接登录,所以配置环境 思路:在登录页判断是什么环境,如果是开发环境就显示演示按钮,生产环境就不显示,可以使用v-if 1.创建配置文件 .env.development开发环境配置文件和.env.production生产环境配置文件 在.env.development中 # 开发环境配置 ENV = 'development' 在.env.production中 # 生产环境配置 ENV = 'production' 2.在登录
Vue 前端代码多地部署（打包后配置动态IP）
来杯卡布奇诺的博客
05-15 2513
vue 代码打包之后，需要在多个地方部署。打包完之后，在 dist 下有一个 config.json 文件，可以通过该文件来动态配置 ip 地址。打包完之后，在 dist 下有一个 config.js 文件，可以通过该文件来动态配置 ip 地址。在 public 根目录下新建一个 config.json 文件。在 public 根目录下新建一个 config.js 文件。在 index.html 中引入 config.js 文件。下面总结两种方式可以在打包之后动态修改 ip 地址。在需要的地方直接通过。
vue工程包含多个项目且支持多个环境部署
骚饼
04-03 2578
vue工程包含多个项目且支持多个环境部署
解决vue打包一次部署到不同的服务器的问题
qq_28013889的博客
06-15 1948
在工作的时候，往往碰到同一套vue前端代码程序需要部署到很多的服务器上，每次更改完程序都需要打包部署到各个服务器上，因为每个服务器的访问地址和端口都不一样，如果用的若依自带的框架，需要每次都需要打包好多个包，一个端口打一个，要是需要部署在10000个服务器，那么每天啥也不用干，写程序1小时，打包得两三天，要命了就，哈哈哈解决这个问题的唯一途径就是打一次包，部署到不同的服务器上就可以，这样就省下很多打包的时间了。这个问题解决完后，又出来了新的问题，无法使用了，然后又要解决websocket的问题；
vue 打包项目在多个环境部署
最新发布
qq_28278833的博客
10-27 424
前期在Linux服务器部署了测试环境，现在需要在服务器上部署生成环境，在部署的时候使用Nginx做代理，前端资源出现无法加载的情况，查看网上资料，发现部署同一台服务器要分环境进行打包。4、router.js中添加base。测试环境：npm run build:stage。生成环境：npm run build:prod。3、packing.json中配置。2、vue.config.js中配置。本地运行：npm run dev。
vue+webpack支持多页面打包
01-06
"vue+webpack 结构，支持多页面打包"这个主题，意味着我们将探讨如何配置Webpack，使其能够处理多个独立的HTML入口页面，每个页面都对应一个Vue应用。 **Vue.js 简介** Vue.js 提供了响应式的数据绑定和组件化功能...
这个项目是基于vue-cli3.0来构建，并且根据需求做了打包多页面应用；能实时的编译打包；
01-24
Vue CLI 3.0 提供了对多页面应用的支持，开发者可以通过配置`vue.config.js`文件来指定多个入口点，每个入口对应一个独立的HTML页面，这样在打包时会生成相应的静态HTML文件。 在这个项目中，开发者不仅创建了多...
Vue项目分环境打包的实现步骤
08-27
Vue项目的分环境打包是开发过程中不可或缺的一环，它允许我们根据不同的部署环境（如开发、测试、预发布和生产）创建针对性的构建。Vue CLI工具虽然默认提供了开发（dev）和生产（prod）两种环境，但往往需要针对更...
nginx配置多个vue项目
09-30
当需要在一个服务器上部署多个Vue项目时，Nginx的配置就显得尤为重要。本篇将详细介绍如何在Nginx中配置多个Vue项目，以便于实现不同域名或子路径下的独立运行。 首先，我们来看一下需求。假设你有两个Vue项目，一...
vue项目多环境打包
qq_20399063的博客
08-11 371
1、package.json文件 "scripts": { "serve": "vue-cli-service serve", "test": "vue-cli-service build --mode test", "prod": "vue-cli-service build --mode production", "release": "vue-cli-service build --mode release", "build": "vue-cli-ser
vue3.x 一套代码打包多环境多项目
老君的博客
11-08 2133
一套代码打包多环境多项目需求多环境打包实现多环境打包实现 版本号： vue/cli：4.5.12 node：v14.15.3 npm：6.14.9 需求 代码多环境打包很常见，直接说说多项目打包： 多项目打包就是一套代码，只有logo，部分样式，标题等不同。 如果分好几套代码，后期改需求总不能每套代码都改一遍，所以就需要多项目打包。 （当然，如果后期项目差异过大时，还是强烈建议把项目区分开来） 多环境打包实现 在package.json的scripts下push以下代码 "dev": "vue-cl
vue项目根据不同环境进行设置打包命令
YanHSama的博客
11-16 4836
vue项目根据不同环境设置打包命令
vue项目给不同环境配置不同的打包命令的步骤
weixin_52443895的博客
04-13 1364
【代码】vue项目给不同环境配置不同的打包命令的步骤。
vue-cli3配置多项目并按项目分别打包
lmy233的博客
10-17 3672
本次项目由于分为客户端和客服端，第一反应便是在vue中构建多页面。 项目结构：这里主要讲解下面所标文件的用处 vue.config.js相关配置： 配置好之后，运行npm run build，项目被打包到dist文件夹下，结果如下图： 可以看出不同项目的资源都会打包到了一起，但这不是我想要的结果，那么接下来只需要修改一下vue.config.js配置，即可使打包的文件按照项目进行分离。 let projectName = process.argv[3] let glob = require('glo
vue实现分环境进行打包
weixin_43898997的博客
03-08 3727
vue+webpack分环境进行打包
vue在不同的环境打包不同的接口地址（巨简单）
weixin_30267785的博客
03-19 300
1.在main.js中，引入axios，并根据当前的域名配置axios的baseURL import axios from 'axios' if (locatin.hostname === 'localhost') { axios.defaults.baseURL = process.env.API_PATH_DEV } else if (locatin.hostname === ...
记录一次vue打包优化方案
陈景夏
08-01 692
完整的vue.config.js const path = require('path') // 在vue-config.js 中加入 // 开启gzip压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 判断开发环境 const isProduction = process.env.NODE_ENV === 'production'; const resolve = dir => { re
vue极致打包_vue 打包部署多个环境
weixin_36186183的博客
12-30 722
1：先下载 cross-env npm install --save-dev cross-env2.1: 第一张方法:在config文件夹里面，新建一个 test.env.js(自定义名字)，这里可以复制一份dev.env.js 里面的内容'use strict'const merge = require('webpack-merge')const devEnv = require('./d...
vue框架介绍 优点 特点 一千字
05-01
Vue.js是一个轻量级的JavaScript框架，用于构建交互式的Web界面。Vue.js是由Evan You在2014年首次推出的，并在短时间内获得了广泛的关注和采用。Vue.js的核心库只关注视图层，易于集成到其他库或现有项目中。同时它也可以通过Vue CLI进行脚手架搭建，支持单文件组件、Webpack打包等常见Web开发工具。 Vue.js的优点： 1. 简单易学：Vue.js的API非常简单，没有其他框架那么复杂，易于上手。同时，Vue.js也提供了全面的文档和示例，可以帮助开发者快速入门。 2. 数据绑定：Vue.js使用双向数据绑定，使得数据的维护更加简单，同时也提高了开发效率。当数据发生变化时，视图也会自动更新，这降低了开发人员的工作量。 3. 组件化：Vue.js是一个组件化框架，可以将一个页面拆分成多个组件，每个组件都是独立的，具有良好的复用性。同时，组件之间的通讯也很简单，可以通过props和事件机制实现。 4. 高效性能：Vue.js的底层采用了虚拟DOM技术，可以避免频繁操作DOM带来的性能问题。同时，Vue.js还提供了异步渲染和组件懒加载等功能，可以进一步提升应用性能。 5. 生态丰富：Vue.js的社区非常活跃，有大量的第三方组件和插件可以供开发者使用。同时，Vue.js也支持与其他流行的库和框架（如React、Angular等）进行集成。 Vue.js的特点： 1. 渐进式：Vue.js是一个渐进式框架，可以逐步应用到项目中。开发者可以只使用Vue.js的部分功能，而不用全部采用。 2. 可组合：Vue.js可以和其他库或框架进行组合使用，由于其灵活性和可扩展性，可以适应各种不同的项目需求。 3. 易于调试：Vue.js提供了丰富的开发者工具和调试工具，可以方便地进行调试和测试。 4. 体积小：Vue.js的体积非常小，压缩后只有30KB左右，可以大大减少页面加载时间。 总之，Vue.js是一个非常优秀的JavaScript框架，具有简单易学、数据绑定、组件化、高效性能、生态丰富等优点，可以帮助开发者快速构建交互式的Web应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值