npm run build 打包爬坑记(2)生产、测试打包

本文详细记录了在Vue2.x项目中如何通过npm run build进行生产与测试环境的打包,包括如何在package.json中配置命令,config文件中的环境区分,以及如何根据环境切换API域名。同时,讨论了如何处理前端内嵌页和手机站的打包策略,通过不同的打包命令创建不同的首页入口,以适应不同的项目需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

随着新功能、新需求的开发,每次打包都能遇到新的问题
比如说这个上线了一版本就不能随便改动了,所以要在线下来一版,线下开发时有时候需要链接正式数据、有时候需要测试数据,所以要分线下测试正式,好吧,晕了,简单点,没有什么是图表解释不了的,请看图表:
在这里插入图片描述

  1. 首先部署是要后台部署,我们用的Xshell 4,这里是后台写的部署,我们只需要按照后台部署好的,让后台区分一下git支线和打包命令就可以
  2. 然后看我们代码,终端运行代码在package.json中更改,这个简单把现有的dev和build拷贝,然后换命令即可。
	"scripts": {
   
   
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "devtest": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "e2e": "node test/e2e/runner.js",
    "test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "buildtest": "node build/build.js"
  },
  1. 然后就是在config中区分: 最好把每一个环境默认的写在else里面

                
### NPM Run Build 打包后常见问题及解决方案 #### 一、打包成功但页面显示为空白 当执行 `npm run build` 后,如果访问生成的 `index.html` 文件时遇到空白页面的情况,通常是因为资源路径配置不正确。一种有效的解决办法是在项目配置文件中的 `path: config.build.assetsRoot` 下方添加如下设置: ```javascript publicPath: './' ``` 这一步骤能够确保静态资源相对于当前HTML文档被正确加载[^2]。 #### 二、其他可能原因分析 除了上述提到的公共路径设置外,还有可能存在其他因素导致页面无法正常展示内容。例如,在某些情况下,可能是由于Webpack或其他构建工具未能正确处理相对路径或是存在缓存机制干扰等问题引起[^3]。 对于这类更复杂的情形,建议开发者仔细检查项目的依赖版本兼容性以及具体的编译配置项;另外也可以尝试清理Node Modules并重新安装依赖来排除潜在冲突。 #### 三、验证部署效果的方法 为了确认打包成果是否可以顺利运行,应当按照以下方式测试: 1. 使用命令行工具进入到包含dist目录的工作空间; 2. 利用HTTP服务器软件(如Python自带SimpleHTTPServer模块)启动本地服务端口; 3. 浏览器输入对应地址查看实际渲染出来的网页内容而非直接双击打开html文件[^1]。 通过以上措施基本能有效应对大部分由`npm run build`引发的相关难题,并保障前端应用最终能够在生产环境中稳定展现预期功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值