npm run build生产环境打包部署

本文介绍如何使用npm打包前端项目并将其部署到Nginx服务器上。具体步骤包括:使用npm run build命令生成dist目录及内容;配置Nginx以正确解析前端路由,并实现跨域转发;最后通过访问localhost:8011完成部署验证。

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

1、npm run build打包成功后,会在dist目录下生成index.html和static文件夹,将dist下所有文件复制到你需要的目录下。

2、配置nginx,以下为简单配置:

server {

        listen 8011  default;

        server_name  localhost;

        location / {

#配置网站根目录,即index.html和static所在的路径

                root   /Users/wqz/git/outdoor-ui/dist;

                try_files $uri $uri/ /index.html last;

                index  index.html;

                add_header Access-Control-Allow-Origin *;

        }

#配置跨域转发,如果你的项目有需要请求其他服务器数据的需要配置,否则可以不用

        location /auth/ {

               proxy_pass http://127.0.0.1:9002;

        }

        location /admin/ {

                proxy_pass http://127.0.0.1:9002;

        }

        access_log  logs/outdoor-ui.access.log;

}

配置完后,重新加载nginx配置,使用命令sudo nginx -s reload , 如果未启动,直接启动就可以了。


3、访问localhost:8011即可。


### 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、付费专栏及课程。

余额充值