Nginx部署Vue项目
很多小伙伴在做完Vue项目之后,想要部署到服务器上自己运行试试。其实使用Nginx就可以轻松的做到,并且实现请求转发等功能。下面来看看使用步骤吧。
使用Nignx部署Vue项目步骤
1.打包Vue项目
npm run build
首先使用打包命令打包Vue项目,之后得到一个dist文件夹。这里面存放的是已经打包好的静态资源文件。
注意:这里不同的项目打包的命令可能不一样,具体配置可以在index.js
里查看
不同的项目结构不一样哦。我使用的是vue-element-admin框架。具体打包方法可以查看框架的相关文档哦。
2.复制dist文件夹到Vue默认目录
安装好Nginx,找到安装根目录。将dist目录里的文件复制到html中。这是默认的nginx根目录,如果这样做的话你不用修改配置文件就可以直接运行。
复制完成后,双击nginx.exe运行nginx就可以运行啦。
3.高级配置
通常情况下ngxin是安装到单独的服务器上,因此一般是把vue打包后的dist仍到服务上的具体位置,然后修改nginx.conf的root路径来指向我们的dist。
如果你想根据自己的需求来配置nginx,或者想部署多个项目的话。你需要通过修改配置文件来完成。
这里放一个我自己的配置。具体可以参考注释。
server {
# 需要被监听的端口号,前提是此端口号没有被占用,否则在重启 Nginx 时会报错
listen 8888;
# 服务名称,无所谓
server_name localhost;
# 上述端口指向的根目录
root /opt/asing1elife/teamnote;
# 项目根目录中指向项目首页
index index.html;
client_max_body_size 20m;
client_body_buffer_size 128k;
# 根请求会指向的页面
location / {
# 此处的 @router 实际上是引用下面的转发,否则在 Vue 路由刷新时可能会抛出 404
try_files $uri $uri/ @router;
# 请求指向的首页
index index.html;
}
# 由于路由的资源不一定是真实的路径,无法找到具体文件
# 所以需要将请求重写到 index.html 中,然后交给真正的 Vue 路由处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
# 关键步骤,这里表示将所有的 http://192.168.7.8:8888/teamnote/api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
# 这里使用 /teamnote/api/ 而不是 /teamnote/ ,是因为前端项目本身的访问链接就是 http:192.168.7.8:8888/teamnote/
# 为了防止在访问页面时请求就被 Nginx 代理转发,这里需要更具体的配置,才能和前端访问请求区分开
location /teamnote/api/ {