1.安装nginx
- 更新源列表
- 安装nginx
- 检查nginx是否安装，输入如下命令后若出现版本号则安装成功
- 启动nginx
- 在浏览器输入ip地址，若出现如下页面则启动成功
2. 打包上传vue项目到服务器
- 打包
我的项目使用的是vs code，在终端输入如下命令进行打包
- 上传
打包完成后会有dist文件，该文件为打包完成后的项目,该文件中有index.html和static两个内容。
将该dist文件上传到服务器的某个位置即可
我上传到/home/ubuntu文件中
配置nginx
- 修改nginx.conf
安装nginx后，nginx的默认目录是/etc/nginx
在该目录中有nginx.conf文件，输入如下命令，使用vi打开该文件
我的nginx.conf文件原内容如下
在http模块中加入如下内容,表示配置文件要引用hosts文件夹下的host后缀的文件。该host后缀文件就是用来配置vue项目的，一个host文件配置一个vue项目
include /etc/nginx/hosts/*.host;
修改后文件如下
- 创建*.host文件
在/etc/nginx中创建hosts文件夹
在host文件中创建syt.host文件，文件名随便命名
在文件中添加如下内容
- 重启nginx
访问vue项目
ip:port/index.html即可进行访问
常见错误
- 浏览器访问时显示403
这个问题有多种原因，我当时遇到的原因是该项目所在的文件没有权限访问。我的项目所在文件是/home/ububtu/dist
使用如下命令保证可以访问(比较暴力qaq)