nginx部署VUE项目

前言

目前公司的前端代码基本都是部署在nginx下，特此来记录一下
开发环境：window10

nginx环境搭建（参考下方文章）

window环境安装
mac环境安装

本地我将nginx放置于F盘

前端项目打包

一个nginx服务下可能会放置多个前端包， 因此我们会在nginx --》html目录下新建文件夹用来存放前端代码，假设html下新建了一个demo文件夹， 那么我们在前端代码中需要做相应的配置

1. vite.config.js中进行配置

export default defineConfig {...base: './',...
}

2. router -> index.js中进行配置

const router = createRouter({history: createWebHistory("/demo"),routes,scrollBehavior: () => ({ left: 0, top: 0 }),
});

接下来就可以将打包后的文件放到nginx -> html -> demo中了

修改 Nginx 配置文件

最后我们需要来修改一下nginx配置文件

...
server {listen       8086;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location ^~ /demo{alias   html/demo;index  index.html index.htm;try_files $uri $uri/ /demo/index.html;}...
}

修改好之后， 就可以到nginx目录下执行nginx -s reload

结束

好了，到此我们就可以通过http:localhost:8086/demo来访问我们的项目了