vue 配置多环境打包 功能

最新推荐文章于 2024-05-20 17:46:32 发布
最新推荐文章于 2024-05-20 17:46:32 发布
阅读量948 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31494485/article/details/107982803
版权
1.安装cross-env依赖在终端执行 npm install --save-dev cross-envcross-env作为运行跨平台设置和使用环境变量的脚本，当执行build动作时通过设置、赋值环境变量告知当前构建包的是测试环境还是生产环境npm上对cross-env的说明2.配置package.json文件,添加如下NODE_ENV 和env_config的值将用于build文件夹process.env 这个对象里面;比如NODE_ENV的值可以在build文件夹下的文件可以通过...
摘要由CSDN通过智能技术生成

1.安装cross-env依赖在终端执行   npm install --save-dev cross-env

cross-env作为运行跨平台设置和使用环境变量的脚本，当执行build动作时通过设置、赋值环境变量告知当前构建包的是测试环境还是生产环境

npm上对cross-env的说明

2.配置package.json文件,添加如下 NODE_ENV 和env_config的值将用于build文件夹 process.env 这个对象里面;比如NODE_ENV的值可以在build文件夹下的文件可以通过 process.env.NODE_ENV 来获取到值

3. 配置build.js

 

最低0.47元/天 解锁文章
qq_31494485
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于vue项目如何配置不同域名
夏沫之初的博客
08-13 2016
vue项目如何配置多个域名
【Vue2 & Vue3】多环境配置（多域名打包）
sanlingwu的博客
04-14 4422
近期同时接触了多个vue项目，经常在2和3中来回切换，同一种需求的实现方式往往不太一样，这里记录一下面对多域名打包的需求时，2和3分别是如何操作的。 需求描述： 同一套代码私有化部署，要部署在多个服务器上，或者是测试服务器与生产服务器不同，即访问服务接口域名不同，通过配置实现多环境的打包。 Vue2： 整体思路：修改配置文件，通过获取命令行的传参定义不同的全局变量。 1.项目中/config/dev.env.js修改： 新增：HOST: '"dev"' 'use strict' const
vue 不同环境后端域名打包配置处理
weixin_44996006的博客
05-26 250
vue 不同环境后端域名打包配置处理
vue 区分多环境打包
最新发布
细节怪的博客
05-20 400
区分不同的环境（测试、正式环境）
vue2 多环境配置开发
weixin_43858276的博客
04-11 494
打印 process.env.NODE_ENV 测试下没问题就ok了。
Vue2+ Webpack 3 配置不同环境下打包后不同域名
Zihuatanjo
04-20 1540
项目需求 生产环境正式版线上地址为：www.xxxx.com 生产环境测试版线上地址为：www.test.com 本地开发环境环境：localhost:8080 公司采用的是Jenkins自动化打包部署系统，在实际开发或者/生产环境时，我们需要打包后的文件配置到不同的域名。我一开始的做法是在main.js中每次打包前修改这个地址，比较繁琐，参阅了相关文章之后，可以通过代码实现，不同的打包命...
vue cli3.0 怎么配置 后端请求接口域名，区别打包环境及 vue项目域名的问题
MISS_zhang_0110的博客
07-26 5673
=>使用域名加端口号访问http//www.test.com1234。在src同级建立一个vue.config.js文件。和src同级建立两个文件。
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
10-16
Vue 提供了一种方法来实现分环境打包，使得我们可以为每个环境定制不同的配置，而无需手动更改代码。以下是如何在 Vue 项目中实现这一功能的详细步骤： 1. **环境变量配置**： - 在 `config` 文件夹内，创建一个新...
vue-multipage vue 模块化开发打包
11-23
在实际使用Vue-multipage 开发时，你需要先安装相关依赖，然后配置Webpack 配置文件（如webpack.config.js），设置多页面入口、输出目录、公共模块等。同时，创建对应的页面组件和路由配置。在完成开发后，运行构建...
vue与django集成打包的实现方法
10-16
总结，Vue.js 与 Django 的集成打包涉及了 Django 项目的模板和静态文件配置，以及 Vue 项目的 Webpack 监听打包设置。通过这些配置，我们可以实现前后端的无缝协作，提升开发效率。记住，这只是一个基础的集成方案...
Vue项目打包编译优化方案
10-14
在 Vue 的配置中，可以开启生产环境的性能提示 (`performance:true`) 来找出可能的性能瓶颈，同时考虑优化组件的复用策略，减少不必要的渲染。 10. **利用缓存**： 利用 HTTP 缓存策略（如 Service Worker 或 ...
vue2通过.env进行多环境配置
weixin_45966674的博客
09-11 1108
我们可以在其他文件中通过 process.env.VUE_APP_API_URL 在js逻辑中拿到 VUE_APP_API_URL配置文件的。然后 我们在项目根目录创建四个文件 分别叫 .env.dev .env.test .env.production。然后 这里我们来个 npm run build:dev 进行 开发环境打包。然后我们打开 package.json 看到原本的打包命令是这样的。然后我们执行 vue create 项目名 创建一个vue项目。
vue2不同版本下如何分环境打包
剑雪封喉
10-18 1187
vue2不同版本下如何分环境打包
Vue多环境打包配置，根据命令生成不同打包文件名
Web_chicken的博客
06-24 3887
2.使用env配置文件设置Axios的baseURL 3.配置scripts脚本运行命令模式 在package.json文件下的scripts对象中配置mode
【vue】配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境
热门推荐
qq_26780317的博客
08-25 1万+
背景：在前后端分离开发的项目中，一般会有开发环境、测试环境、预上线环境和生产环境。 1.在开发环境下调试接口的时候，一般都会有好几个接口地址，需要根据情况手动来切换接口地址； 2.打包时要部署项目到不同的环境，而这也需要每次都根据情况切换接口地址。 虽然，手动切换地址可以满足需求，但是这种方式不是一种较为便捷的处理方式。我们可以选择一种较为方便的方式来解决这个问题。 ...
vue-cli2多环境打包配置
luoyu19940615的博客
05-27 2768
背景：框架vue2+工具vue-cli2，项目需要打包两个角色，三个运行环境：本地，测试，生产， 上线发布有的直接在根目录下，有的需要在二级目录下。 一、增加打包配置文件 1、config文件夹增加4个环境变量文件，build文件夹增加7个打包配置文件 2、新增环境变量文件： 添加规则按照已有环境变量添加即可，名字自己取，最好见名知意，图中的APP_USER_TYPE自定义，如果需要更多自定义变量自行增加即可。 3、新增build文件：拷贝已有build文件，修改process.env.N
vue中配置webpack不同环境下的域名及参数
IT水很深，路还很长
07-14 1322
vue中配置webpack不同环境下的域名及参数 假设一个项目 需要有开发环境(dev), 测试环境(test), 正式环境(prod), 并且三种环境都要build打包的需要; 前提是已通过vue-cli初始化了项目; 1.先在page.json中配置脚本命令 // 开发环境启动 "serve:dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", //测试环境启动 "serve:test"
vue2开发环境与正式环境配置
u012858643的博客
05-15 881
1、首先添加两个文件，一个是正式环境的，一个开发环境的（我所在的公司项目只有两个环境，测试环境和正式环境，所以开发环境其实也就是测试环境的。2、.env.development 文件的内容，属性必须以VUE_APP_开头。.env.production 文件的内容，属性必须以VUE_APP_开头。地址），文件名最好直接复制，避免敲错排查问题会浪费开发时间。3、request中使用，process.env 是全局的。4、package.json中配置。
在cordova环境下打包vue项目并调用拍照功能
05-31
你可以尝试使用以下步骤来实现在 Cordova 环境下打包 Vue 项目并调用拍照功能： 1. 在 Cordova 项目根目录下执行以下命令安装 Cordova 插件 Camera： ``` cordova plugin add cordova-plugin-camera ``` 2. 在 Vue 项目中安装 Cordova 插件 Camera 的 TypeScript 类型： ``` npm install --save-dev @types/cordova-plugin-camera ``` 3. 在 Vue 项目的入口文件 main.ts 中添加以下代码： ``` declare var navigator: any; const app = createApp(App); app.config.globalProperties.$takePicture = () => { return new Promise((resolve, reject) => { navigator.camera.getPicture((imageData: string) => { resolve(`data:image/jpeg;base64,${imageData}`); }, (error: any) => { reject(error); }, { quality: 50, destinationType: navigator.camera.DestinationType.DATA_URL }); }); }; app.mount('#app'); ``` 上述代码会将 Cordova 的 Camera 插件添加到 Vue 的全局属性中，以便在 Vue 组件中调用。 4. 在 Vue 组件中调用 `$takePicture` 方法： ``` <template> <div> <button @click="takePicture">Take Picture</button> <img :src="image" v-if="image" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const image = ref(''); const takePicture = async () => { try { const imageData = await (window as any).$takePicture(); image.value = imageData; } catch (error) { console.error(error); } }; return { image, takePicture, }; }, }); </script> ``` 上述代码会在 Vue 组件中定义 `$takePicture` 方法的调用，在用户点击“Take Picture”按钮时调用该方法。调用成功后，图片的 base64 编码会被设置到 Vue 组件的 `image` 变量中，并渲染到页面上。 以上是一个简单的实现，在实际开发中你可能需要进行更多的配置和调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值