windows下使用nginx部署vue项目

最新推荐文章于 2024-07-23 21:20:45 发布

虎皮小卤蛋

最新推荐文章于 2024-07-23 21:20:45 发布

阅读量379

点赞数 1

文章标签： nginx vue

本文链接：https://blog.csdn.net/weixin_45188395/article/details/116568673

版权

在vue项目config\index.js文件中修改两处

assetsPublicPath: './',  //原值'/'
productionSourceMap: false,  //原值true

使用npm run build将项目打包，打包完成会多一个dist文件夹，将它拷贝到在服务器上
进入nginx安装目录（nginx下载地址，下载后解压即可），在config\nginx.conf文件中添加配置

server{
	listen       8080;  # 端口
	server_name  192.168.xxx.xxx;  # ip地址
	location / {
		root   D:\vue\vue01\dist;  # 文件路径
		index  index.html index.htm;
	}
}
# 如果是部署多个项目只需要继续添加配置即可
server{
	listen       8000;  # 端口
	server_name  192.168.xxx.xxx;  # ip地址
	location / {
		root   D:\vue\vue02\dist;  # 文件路径
		index  index.html index.htm;
	}
}

运行nginx.exe或者在安装目录cmd运行start nginx，访问192.168.xxx.xxx:8080，完成部署
TIP：如果路径中有\n会发生转义导致无法访问，如 D:\nginx\dist