Vue--vue项目部署--1.本地Windows10运行，使用nginx运行vuecli

vue项目部署–本地Windows10运行，使用nginx运行vuecli

1. 本地Windows10运行（本篇）
2. 服务器Linux运行
3. 设置自动部署

1.环境、工具

工具	版本
npm
node
vue-cli
VScode（编辑代码）
sublime_text（编辑配置文件）
nginx（项目运行）

文件目录，如过一下使用到路径问题，可根据此表格查看我各个文件目录

文件目录	具体位置（本地）
vue项目路径	E:\work-Vue\demo02-20.1.14
nginx服务路径	E:\work-www\nginxS\nginx-1.17.9

2.步骤概述

1. 将vue项目打包成dist（默认）文件夹
2. 通过工具将dist文件夹运行起来
3. 将dist文件夹移动，测试上传后是否能启动

3.详细步骤

1.项目打包成dist文件夹

项目打包非常简单，网上有许多教程，本文不做详细解释
代码

npm run build

打包成功后生成dist文件夹（默认）

打开vue项目目录，可找到打包文件夹

打包后文件夹内容

2.使用nginx运行项目

通过网址http://nginx.org/en/download.html下载nginx，
我下载的版本是当前最新版1.17.9，

下载完成后，解压安装到nginx目录E:\work-www\nginxS
解压完成截图

解压文件内容
注：使用cmd启动服务时，需进入此文件夹，否则会报错找不到nginx

3.修改配置文件

当期使用默认配置文件，待项目运行成功后，再配置按照项目区分
通过sublime工具打开文件nginx目录/conf/nginx.conf

跟在serve后面新建个serve

注：
1.其中E:\work-Vue\demo02-20.1.14\dist为vue项目打包
2.index配置为out/index.html是因为我index.html放到了out/文件夹下
3.本文件夹文身有serve，我未做修改，这个serve和原有的并级

  server {
      listen       8088;
      server_name  127.0.0.1;

      location / {
          root E:\work-Vue\demo02-20.1.14\dist;
          index  out/index.html;
          try_files $uri $uri/ index.html;
      }
  }

项目启动成功

4.通过载入其他配置文件，启动项目

避免项目过多，配置杂乱，使用include根据项目引入配置

引入代码，将所有domainS文件夹下，conf后缀的文件载入配置
注：
1.此处include位置无要求，但应放到http层下
2.通过搜索include，可找到本身原有配置include mime.types;可将其放到此处下一行，便于查看
3.domainS为新建文件夹名称，无要求，但是不能取名单个字母（我使用d做文件夹名称时，引用不到子配置文件）
4.记得注释新添加的serve，注释文件使用#符号

include domainS/*.conf;

5.新建配置文件（单个项目配置文件）

新建单个项目配置文件chat.conf

编辑内容（同上级配置文件serve），本文只有一个本项目serve

启动项目成功

6.将项目文件dist移入nginx

打包目录E:\work-Vue\demo02-20.1.14\dist将dist文件夹
移入nginx存放项目目录E:\work-www\nginxS\nginx-1.17.9\html，并重命名为vueS

chat.conf配置修改路径为html/vueS

通过cmd启动项目，成功

4.cmd对nginx操作

启动
start nginx
停止
nginx -s quit
nginx -s stop
重启
nginx -s reload

5.借鉴学习博客

因查阅太多，用云笔记整理
链接：http://note.youdao.com/noteshare?id=1828c7802bb0d276e5bc2e9bc2e0ee8d&sub=E5C5985999B34418958F13869A0C7EE3

6.启动vue项目的三种方式

1. nginx启动
2. Tomcat启动
3. express启动