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
相关推荐
你的电影很有趣27 分钟前
lesson77:Vue组件开发指南:从基础使用到高级通信
javascript·vue.js·1024程序员节
Mr.Jessy1 小时前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
code_YuJun1 小时前
管理系统——应用初始化 Loading 动画
前端
oak隔壁找我1 小时前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
Elieal1 小时前
AJAX 知识
前端·ajax·okhttp
sulikey2 小时前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
烟袅2 小时前
JavaScript 变量声明报错指南:var、let、const 常见错误解析
javascript
烟袅2 小时前
告别 var!深入理解 JavaScript 中 var、let 和 const 的差异与最佳实践
javascript·面试
烛阴2 小时前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智3 小时前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节