[问题探讨]VUE项目为新环境配置新的npm run打包命令

最新推荐文章于 2024-02-23 13:41:07 发布
最新推荐文章于 2024-02-23 13:41:07 发布
阅读量538 收藏
点赞数
分类专栏： WEB项目全局性功能集合 问题探讨 文章标签： js vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tom_wong666/article/details/102923128
版权

需求：VUE项目为新环境配置新的npm run打包命令，为此命令定义专属环境变量，比如预发布环境npm run preDeploy

STEP1：先上图解释npm run build命令如何获取环境变量

1，npm run build命令调用 build文件夹中的build.js

2，build.js调用了build文件中的webpack.prod.conf.js

3，webpack.prod.conf.js调用了config文件夹中的prod.env.js

4，prod.env.js中定义了生产生产环境变量

5，变量在组件中使用：process.env.NODE_ENV可以获取到

STEP2：参考npm run build命令，配置npm run preDeploy，在preProd.env.js中定义其专属环境变量

tom_wong666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue项目打包之开发环境和部署环境的实现
10-15
在本文中，我们将深入探讨如何在Vue项目中实现这两种环境的打包。 首先，开发环境和部署环境的主要区别在于接口和服务。在开发阶段，前端开发者可能会使用本地服务器和模拟数据，以便快速迭代和测试。然而，当项目...
vue cli构建的项目中请求代理与项目打包问题
11-29
Vue CLI提供了`npm run build`命令来生成生产环境的静态文件。这个过程包括了代码压缩、Tree Shaking（去除未使用的模块）、懒加载优化等步骤，以提高应用的加载速度和性能。默认情况下，打包后的文件会输出到`dist`...
vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
鹏多多的博客
04-29 4031
目录1，前言2，.env文件的作用3，配置.env文件4，配置启动命令5，获取.env中的全局变量5，实际用处 1，前言 分享一下vue项目中利用.env文件存储全局环境变量，以及利于项目开发的vue启动以及打包命令。 2，.env文件的作用 在vue项目中，env是全局配置文件，可以存储不同环境下的变量。使用vue-cli搭建项目，默认会在根目录创建一个.env文件，如果需要更多类型的.env文件，需要自行创建。 其中： 1，.env 后缀的文件是全局默认配置文件，不论什么环境都会加载并合并。 2，
vue打包时使用不同的环境变量
weixin_43617604的博客
10-17 1841
vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量，目前的环境有三个： 一、本地------开发环境 二、线上------测试环境 三、线上------正式环境 我们都知道vue默认的打包都是生产模式，所以说打包后的都是线上的东西，现在我们解决一下如何通过不同命令的打包方式使用不同的环境变量。 安装cross-env npm install cross-env --s...
前端项目打包与发布
最新发布
leva的博客
02-23 7247
所以Vue官方推出一款Chrome插件Vue-devtools，Vue-devtools是一款基于Chrome浏览器的插件，用于调试Vue应用，这可以极大地提高调试效率。当添加完Vue-devtools扩展程序之后，在调试Vue应用的 时候，打开F12，在Chrome开发者工具中会看一个Vue栏，单击之后就可以看见当前页面Vue对象的一些信息，如图7-22所示。步骤1：首先安装全局的serve，在命令行输入命令npm install-g serve，Vue-devtools的安装步骤如下。
npm run build:prod打包步骤
热门推荐
前端视听
08-02 2万+
1：打开.env.development 将接口地址设置成线上访问 注释本地 VUE_APP_BASE_API = ‘/’ ENV = 'development' # 接口地址 VUE_APP_BASE_API = '/' #VUE_APP_WS_API = 'http://192.168.4.103:8091/' # 是否启用 babel-plugin-dynamic-import-node插件 VUE_CLI_BABEL_TRANSPILE_MODULES = true 2：打开.env.l
【打包vue前端项目】
m0_45991266的博客
06-29 1万+
实例项目是使用vue3+vite。对于vue项目进行打包,npm run build
解决vue build打包之后首页白屏的问题
08-27
在开发Vue.js应用时，我们通常会使用`npm run build`命令将项目打包为生产环境版本。然而，有时候在执行这个命令后，发现打包后的应用在浏览器中打开时会出现首页白屏的情况。这个问题可能由多种原因引起，但最常见...
vue项目用HBuilder打包APP.docx
09-09
首先，对于Vue项目，通常我们通过`npm run build`命令来打包项目。然而，为了适应移动端应用的打包需求，我们需要在项目根目录下创建一个`vue.config.js`文件，这个文件允许我们自定义webpack配置。在`vue.config.js...
Vue项目使用electron打包成.exe文件
08-22
以上就是使用 Electron 将 Vue 项目打包成 .exe 文件的详细步骤，包括项目准备、环境配置、问题处理和打包流程。在整个过程中，要注意适配 Electron 环境，解决可能出现的兼容性问题，以及正确配置和执行打包命令。
关于vue打包时 npm run build 命令 报错的解决方法
m0_65450343的博客
06-10 4034
关于vue打包时 npm run build 命令 报错的解决方法
npm打包整个过程
前端小99的博客
12-02 1万+
这里注意点package.json文件夹 main放入放入当前npm run build 打包后的。当包有修改的时候， 2：先修改package.json中的版本号（version），注册需要用户名，密码和邮箱， 当注册完成后需打开邮箱进行验证（邮箱不验证无法上传）打开npm官方网站： www.npmjs.com;然后再执行npm publish；（不修改版本号上传会失败）后续会让填用户名密码和邮箱；上传时不能使用淘宝镜像。
Vue webpack生产环境打包，报错：npm ERR! Failed at the vue-admin-template@4.4.0 build:prod script.
m0_63788617的博客
08-04 9282
对Vue项目进行开发环境打包时，执行 ‘npm run dev’,可以正常运行项目；查了很多资料，也没找到方法解决，有哪位大佬知道怎么解决吗？
vue项目报错及解决npm run build:prod打包错误
爱吃Java的羊的博客
12-02 1584
解决方法：vue项目报错及解决npm run build:prod打包错误
vue项目打包以及优化
Donnien的博客
07-28 1794
vue项目的打包上线及优化 项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理 vue项目的打包 脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包 打开终端，切换到项目根目录 输入命令：npm run build 会在当前项目的根目录下生成一个dist文件夹，里面就是打包后的文件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NISVuSR5-1627475455629)(img\01-打包后的文件目录
关于Vue cli 3的 vue.config.js 配置实时打包问题，启动npm run build命令，webpack的watch实时打包文件
qq_34648151的博客
01-30 7582
vue-cli 3.0项目 vue.config.js 配置，npm run build之后，webpack的watch实时打包（dist）文件 vue-cli 3.0 官方配置文档链接 点击进入，vue-cli 3.0 官方配置文档链接，更加深入了解详细配置 vue-cli 3.0 不建议直接修改webpack，提供两个配置参数，以供修改webpack里面配置项 1. chainWebpa...
VUE---项目打包
sinat_34896766的博客
01-29 642
当项目做完，要 执行 npm run build 打包最终的结果（最终的结果会打包进dist文件夹）。
部署nodejs，npm打包vue项目环境部署并完成访问
m0_52369979的博客
06-06 1260
本文详细安装nodejs,npm即打包vue前端教程，以及nginx进行访问。
Vue中如何进行打包与部署？
stormjun的博客
06-10 2万+
本文介绍了Vue中如何进行打包与部署，包括使用Webpack进行打包、使用Nginx进行部署和使用Docker进行容器化部署。这些方法都是常用的Vue应用程序的打包和部署方法，可以根据实际需要选择合适的方法进行部署。
vue.js 打包项目 npm run build 一直在building的问题
07-27
回答: 当运行`npm run build`时，如果项目卡在building状态不动，有几种解决办法可以尝试。首先，可以找到项目中build目录下的check-versions.js文件，将其中的代码注释掉。这个文件中的代码会检查npm的版本，注释掉后可以避免卡住的问题。\[1\]另外，通过执行`npm run build`时打印的日志可以发现两次打包之前输出了不同的日志，分别是"Building legacy bundle for production..."和"Building module bundle for production..."。这可能是由于项目中使用了不同的打包方式导致的。\[2\]如果以上方法都没有解决问题，还可以尝试在执行build命令时加上`--no-module`参数，即`vue-cli-service build --no-module`。另外，还可以修改项目中的browserslist配置，一般在package.json文件中或者单独的.browserslistrc文件中，添加一个"not ie 11"的配置。这样可以避免在打包过程中出现问题。\[3\]希望这些方法能够帮助你解决vue.js打包项目一直在building的问题。 #### 引用[.reference_title] - *1* [vue项目在运行npm run build时卡住不动的解决办法](https://blog.csdn.net/rongyuliu951080er/article/details/114026740)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue2 项目升级到vue3之后npm run build执行两遍打包](https://blog.csdn.net/weixin_44243061/article/details/124401155)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tom_wong666

码字不易，分享有功，期待赞赏！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值