linux上nginx配置vue项目实例教程

一、vue打包

在vecode的同级目录输入npm run build，成功则将dist文件夹传输到服务器上。

二、确定dist文件夹位置

这里要注意，dist文件夹建议不要放在/root/文件夹下面，比如说/root/dist,这样子可能会引起nginx的权限不够导致的403错误，所以建议放到/home/其他用户/目录下 这是我的nginx配置

cd/etc/nginx/sites-enabled

sudo vi default

server { 

		listen 8080;//前端运行端口

server_namelocalhost;

#charset koi8-r;

#access_loglogs/host.access.logmain;

location / {

root /home/hzy/dist; #nginx里html的dist文件夹路径

indexindex.html index.htm;

}

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

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

location @router {

rewrite ^.*$ /index.html last;

}

# location / {

# root html;

# indexindex.html index.htm;

# }

#error_page404/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;

}
}

通过ip地址:8080就可以访问了。

总结

要注意dist所在位置是否需要高权限。