vue打包后的dist文件如何启动测试

vue项目进行webpack打包操作 npm run build 后,会生成dist静态文件夹,这个文件是不能直接运行的,如果我们想要进行测试的话,一般是有两种方式

nginx静态代理

首先可以通过nginx做静态资源映射,首先修改nginx的配置 nginx.conf

bash 复制代码
server {
	listen       9527;
	server_name  localhost;	
	add_header Access-Control-Allow-Origin *;
	add_header Access-Control-Allow-Methods *;
	add_header Access-Control-Allow-Headers *;
	if ($request_method = 'OPTIONS') {
	 return 204;
	}
	location / {
		root   D:\mogu_blog\data\vue_mogu_web\dist;
		index  index.html index.htm;
	}
}

然后添加录下内容,最后把的文件夹放在如下目录

bash 复制代码
D:\data\dist

最后启动nginx,然后访问如下ip地址

bash 复制代码
http://localhost:9527

即可看到我们的页面

server方式启动

同时npm还提供了 serve 命令,来进行测试,这种方式比nginx更加方便,可以直接进行测试,但是存在的问题就是,没有办法指定端口号,而只能开启 5000端口

bash 复制代码
# 安装 serve模块
npm install -g serve
# 启动
serve -s dist

启动后,访问如下地址

bash 复制代码
http://localhost:5000
相关推荐
RainbowSea23 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴28 分钟前
笨方法学python -练习14
java·前端·python
Mintopia35 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖39 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1011 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试