vue webpack文件打包后的文件如何本地运行

1、安装express-generator

npm i express-generator -g
 

2、创建一个express项目 

express my-express-project
 

3、进入项目目录 

cd my-express-project 
 

这时候能看到my-express-project文件夹下的内容是这样的

4、安装相关项目依赖

npm install
 

然后把刚刚打包后的dist文件夹下的所有文件复制到public文件夹下面 

5、启动项目 

npm run start
 

6、浏览器中查看

在地址栏输入localhost:3000即可

 

前端小伙伴第一次接触vue的时候会涉及到webpack打包代码文件后本地运行路径不对的问题,博主遇到的是这样的问题不知道与你们的是否一样,如下图

 

 

如果遇到这样的问题,那是引文webpack打包的资源文件是根目录的形式,即:‘/’  与  ‘./’的区别(后者是相对路径)

此时百度一下,会有网友说建立本地服务运行代码不就行了    确实啊,博主也很同意这种办法,我就提供大家两个办法:

1,nodeJS建立本地服务

 

 

打包后的文件在dist目录,建立sercer.js文件(文件名自定义)

server.js

 

 

运行server.js

 

浏览器打开localhost:8888 你的本地页面就可以运行了

2,http-server方法

命令一:npm install http-server -g 全局

命令二:http-server

 

 

默认的是8080端口

通过命令http-server -a 0.0.0.0 -p 8081可以修改端口号

打开提供的三个中的任意链接都可以打开本地打包的页面(只要打开地址会默认寻找index.html)

转自: https://www.jianshu.com/p/893aea17b9d4

posted on   水行者  阅读(871)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
历史上的今天:
2012-02-24 ajaxfileupload的应用

导航

点击右上角即可分享
微信分享提示