nginx部署本地启动vue项目

需求：就是想在本地不运行vue项目，可以直接访问到打包后的vue项目

1.安装nginx

nginx: download，这里我安装的1.12.2稳定版本

2.下载完直接得到一个压缩包，直接把它解压到一个目录

！！！！注意！！！解压路径一定一定不要有中文，有中文就会报错！！！

之后双击nginx启动，或者是在nginx的解压目录cmd运行start nginx，发现屏幕有个窗口闪了下

3.检测nginx是否启动成功

在任务管理器中查看后台进程是否有nginx，如果没找到那就是启动失败

4.nginx启动失败后解决

打开在nginx的解压目录的logs文件，看到报错日志，直接打开，复制报错信息百度

 5.端口占用报错

网上很多解法啊，我这边选择最简单的，直接把nginx的默认80端口改了，改个绝对不会被占用的端口就完事了，如图从conf==》nginx.conf，双击选择日记本打开

找server下的listen，写的80，直接把80改为8888之后重启nginx 

在nginx的解压目录下，cmd后再重启nginx：

nginx -s reload

6.在vue项目的vue.config.js文件配置前端打包项目名称

process.env.VUE_APP_PUBLIC_PATH这个是自己定义的环境变量，自己定义个名字就可以了，想叫什么都行，这个环境变量不知道去哪配置的，就自己手写个，比如

let publicPath ="/student/"

base:"/student/"

名字一致就行了，注意要配置多个项目需要和localhost的别名一致，看不懂的请往下翻

// 基础路径 注意发布之前要先修改这里
let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
module.exports = {
  // 根据你的实际情况更改这里
  publicPath
}

在router里面也要更改

// 导出路由 在 main.js 里使用
const router = new VueRouter({
  mode: 'history',
  base: process.env.VUE_APP_PUBLIC_PATH,
  routes
})

7.打包vue项目

运行如下命令后

npm run build

把打包好的dist文件直接丢到 nginx的html中

7.运行项目

端口号80根据自己在conf文件中设置的自行更改

http://localhost:80

8.关闭nginx服务

nginx -s stop

9.部署多个项目（vue，webpack等）

上面文章是部署单个项目的，你配不配置vue.config.js和router都可以，是默认的

需求：一个端口配置n个项目

根据端口后面拼接别名的方式实现配置n个项目

在conf==》nginx.conf中进行配置

1. 注意第一个端口默认项目可以什么都不配置，直接打包
2. 在html文件中新建个文件夹存放项目，叫什么都行，在这里我随便新建了三个文件夹存放项目

       3.把打包后的文件目录丢到新建的文件夹内，目录差不多就这样

 ·      4.在conf==》nginx.conf中进行配置，首先找到server{},

注意！！这个/company 名称要和你在webpack或者是vue上配置的名称一致，不然一直给我显示找不到

 server {
#端口号
        listen       8888;
#域名，没有买域名就用本地的不需要改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
#默认项目
        location / {
#这个是目录，从html开始找项目目录
            root   html/web;
            index  index.html index.htm;
        }
#/company 是需要进行配置，如果是端口默认的就不需要配置
        location /company {
      #注意后面需要加/
	  alias html/renren/dist/;
            index  index.html index.htm;
        }
}

        5.配置第二个项目，如果是webpack推荐看这篇，懒得写了

        配置webpack

        6.配置vue项目请往上翻，我在标题6上已经写了

10.不同端口配置不同项目

这个就简单了，直接copy，改个端口和root的你自己把打包的项目存放的地址就行了

！！注意！打包的项目一定要放在html文件中，其他的都不行

 server {
        listen       8870;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root  html/company/dist;
            index  index.html index.htm;
        }

}

11.最后

！！！如果修改了nginx.conf文件一定一定要保存后重启nginx

发几个nginx的命令，nginx命令要在nginx的安装目录下，cmd打开控制面板再使用命令

查看版本
nginx -v
开启nginx服务
start nginx
重启服务
nginx -s reload
关闭服务
nginx -s stop

差不多了吧，文章到此结束，希望对你有所帮助~