利用 Nginx 将 Vue 项目部署到服务器上,通过本文章可以简单了解网站部署的知识,相应的其他 web 项目的部署也是可以同理而解,Nginx 的安装参考这篇文章 LNMP 安装指南 ,文中 “N” 的部分即 Nginx

服务器系统: Centos,服务器软件: Nginx

生成网页文件

当我们把 Nginx 安装完成的时候,Nginx 目录下有个 html 文件夹,里面存放着的便是我们的 web 文件,访问 Nginx 的 ip 地址看到的便是这个文件渲染的页面,通常以 index.html 为入口文件,若要以 index.php 作入口文件,需要做相应的配置实现。

好,现在我们知道了,Nginx 加载的页面放在 html 中,并且以 index.html 为入口,想想平时我们的项目打包之后,(一般来讲)会在 dist 目录下生成一个 index.html 和 static 文件夹,打包结束时命令行也会提示,打包出来的文件需要运行在 http server 上,以文件的形式打开不会运行。

Build complete.

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

上传到服务器

我使用的连接服务器的工具是 MobaXterm ,是一个免费的服务器连接工具,参考文章 MobaXterm使用教程 ,个人感觉比 Xshell 用起来要简单一些,好多地方都很图形化的样子,还自带了 sftp 功能,便于上传和下载服务器上的文件,将 dist 目录下的文件上传到 Nginx 下的 html 目录下,运行命令就可以在 ip 访问的时候看到新的页面啦。

/server/nginx/sbin/nginx -t // 检测配置文件
/server/nginx/sbin/nginx -s reload // 重载

去掉路径后面的 #

页面路径后面缀着一个 # 看起来不太美观,那么有办法去掉它吗,当然是可以的,首先我们要在 Vue 项目的 router 的配置中,将 mode 改为 history 。然后修改 Nginx 的配置即可。

location / {
    try_files $uri $uri/ /index.html;
    root   /service/nginx/html/code/;
    index  index.html index.htm;
}

标签: none

仅有一条评论

  1. 伟子哥 伟子哥

    挺好,棒棒的

添加新评论