前端打包后生成的dist 或 build目录,如何在本地启动服务运行

前端打包后生成的dist/build目录,如何在本地启动服务运行

运行npn run build,会打包后会产生 distbuild 目录
一般情况下,直接打开dist 或 build 目录下的 index.html会在浏览器看到内容。
然而发现网页一片空白,打开了控制台,看到一片404的各种找不到资源,或者出现跨域的提示

请添加图片描述

解决方案

  • server https://www.npmjs.com/package/server
  • http-server https://www.npmjs.com/package/http-serve
  • live-server https://www.npmjs.com/package/live-server
  • 在本地搭建express服务器
  • 使用nginx本地服务器

方案一

前三种基本使用方法是一致

以 live-server 为例:

  1. 全局安装live-server插件
npm install -g live-server 
  1. distbuild文件夹(刚刚打包成功后多出来的文件夹)终端输入
live-server
  1. 浏览项目
    默认监听在8080端口,打开浏览器,输入localhost:8080 就可以预览了

http://www.51sio2.cn//article/334864831.html

方案二

搭建express本地服务器

具体介绍:
https://www.pudn.com/news/63451f42272bb74d44499443.html

方案三

使用nginx本地服务器运行

具体介绍:
https://www.pudn.com/news/63451f42272bb74d44499443.html

方案四

手动起一个本地服务

具体介绍:
https://www.codenong.com/cs109000079/

在使用Vue.js开发完成后,我们需要将代码进行打包,以便在生产环境中部署和运行。 首先,我们需要使用Vue CLI来创建一个项目。在项目的根目录下,可以运行`npm run build`命令来进行打包。这个命令会根据配置文件将所有的Vue组件、样式文件、图片等资源进行压缩和合并,最终生成一个或多个静态文件。一般情况下,打包后的文件会存放在一个名为`dist`的文件夹中。 接下来,我们可以简单地通过打开`index.html`文件来试运行打包后的Vue项目。找到`dist`文件夹中的`index.html`文件,使用浏览器打开它即可。 然而,由于Vue项目使用了一些前端开发的高级特性(例如路由、异步加载等),直接打开`index.html`文件可能会导致某些功能无法正常运行。这时,我们可以使用一个简单的HTTP服务器来模拟生产环境并运行Vue项目。 我们可以使用诸如`http-server`、`live-server`等工具来快速搭建一个本地服务器。这些工具可以帮助我们在本地使用HTTP协议运行项目,以便测试和调试。在项目的根目录下,通过命令行运行`http-server dist`命令即可启动一个本地服务器,并将`dist`文件夹作为服务器的根目录。在浏览器中输入`http://localhost:8080`即可访问项目。 总结起来,Vue项目打包后可以通过直接打开`index.html`文件来试运行,但建议使用一个本地服务器来模拟生产环境并运行项目,以便更好地测试和调试。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值