nginx部署vue项目（成功详细版本）

女爷i 2023-10-09 14:22 17阅读 0赞

### 1.安装 ###

去nginx官网安装稳定版本

[nginx news![icon-default.png_t_M4AD][]http://nginx.org/][nginx news_icon-default.png_t_M4AD_http_nginx.org]![717e82fdea0f4abeb6cc357f6b19d9fc.png][]

![1cc7aeceaf9d42eb9637ab947f76b295.png][]

下载好以后直接解压就行（里面的内容如下图）

![3766c42584c44df8a5c001baa8e2326d.png][]

### 2.配置 ###

#### （1）将打包好的dist文件夹放进html文件夹里面 ####

![d52600d2e04a4ecf954d3d2e6ce420af.png][]

![5ce6be4dcde24596b44f5203ea6fa7cc.png][]

（2）修改conf目录下的nginx.conf文件

![612b73b4d82c481eb946d9a90f56c3a0.png][]

server \{ listen 8887;\#设置监听的端口

server\_name localhost;

\#charset koi8-r;

\#access\_log logs/host.access.log main;

location / \{

root html/dist; \#nginx里html的dist文件夹路径 主要修改这一行 默认值是html 改成我这样就可以

index index.html index.htm;

\#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件

\#因此需要rewrite到index.html中，然后交给路由在处理请求资源

location @router \{

rewrite ^.\*$ /index.html last;

\# location / \{

\# root html;

\# index index.html index.htm;

\# \}

\#error\_page 404 /404.html;

\# redirect server error pages to the static page /50x.html

error\_page 500 502 503 504 /50x.html;

location = /50x.html \{

root html;

\} \#....... \}

#### （3）启动（双击nginx.exe文件夹就行） ####

![deff4d5648d04063b30af9083678e6b1.png][]

#### （4）坑 ####

每次修改配置文件的时候在当前目录下的命令行敲

nginx -s reload

![52d978881d33416888ce4600e801feca.png][]

#### （5）关于更多的nginx命令在我其余博客文章可以看到 ####

[icon-default.png_t_M4AD]: https://csdnimg.cn/release/blog_editor_html/release2.1.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M4AD
[nginx news_icon-default.png_t_M4AD_http_nginx.org]: http://nginx.org/
[717e82fdea0f4abeb6cc357f6b19d9fc.png]: https://img-blog.csdnimg.cn/717e82fdea0f4abeb6cc357f6b19d9fc.png
[1cc7aeceaf9d42eb9637ab947f76b295.png]: https://img-blog.csdnimg.cn/1cc7aeceaf9d42eb9637ab947f76b295.png
[3766c42584c44df8a5c001baa8e2326d.png]: https://img-blog.csdnimg.cn/3766c42584c44df8a5c001baa8e2326d.png
[d52600d2e04a4ecf954d3d2e6ce420af.png]: https://img-blog.csdnimg.cn/d52600d2e04a4ecf954d3d2e6ce420af.png
[5ce6be4dcde24596b44f5203ea6fa7cc.png]: https://img-blog.csdnimg.cn/5ce6be4dcde24596b44f5203ea6fa7cc.png
[612b73b4d82c481eb946d9a90f56c3a0.png]: https://img-blog.csdnimg.cn/612b73b4d82c481eb946d9a90f56c3a0.png
[deff4d5648d04063b30af9083678e6b1.png]: https://img-blog.csdnimg.cn/deff4d5648d04063b30af9083678e6b1.png
[52d978881d33416888ce4600e801feca.png]: https://img-blog.csdnimg.cn/52d978881d33416888ce4600e801feca.png