linux部署nginx+vue项目

---

前言

近期需要在服务器上部署开发的自动化测试平台，因为前端是采用vue进行开发的，所以需要打包部署在服务器上

一、打包vue项目？

需要现在vue项目目录下创建vue.config.js，内容如下

module.exports = {
	publicPath: './',
}

主要是为了防止打包后，静态资源无法访问的问题
执行npm run build开始进行打包
等待打包完成，打包完成后在当前目录下会出现一个dist文件夹，打开文件夹中的index.html
如果出现

官网的解释是：
dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 baseUrl 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。

二、安装nginx

1、执行以下安装命令

sudo apt-get install nginx

安装完成，查看版本来检测是否安装成功。

nginx -v 

大致效果图如下：

二、nginx+vue的使用

1.讲vue打包好的dist放到服务器上
2.配置nginx服务
切换到nginx 的配置文件夹目录下

cd /etc/nginx/conf.d

这里我们需要添加对应网站的配置文件。这里给一个常用的命名规则：项目名+二级域名+端口.conf .使用touch命令创建

touch tboss-80.conf

编辑文件

vim tboss-80.conf

内容如下：

server {
  listen 8001;

  location / {
        root   /home/tboss/dist;
        index  index.html index.htm;
  }
}

其中/home/tboss/dist;为vue打包文件放在服务器的目录

done