1、安装 nginx

2、到 nginx 的安装目录下使用 start nginx 启动 nginx 服务

3、nginx 的主配置文件在/conf/nginx.conf

4、修改 vue 项目里的 vue.config.js 的配置文件

添加 publicPath 选项，根据你需要部署的路径来进行设置。

// 方案一：
module.exports = {
  publicPath: "/",
  //默认的输出目录名为dist，'/'等价于'/dist/'
};

// 方案二：
// 值根据你所需要部署的项目路径来，如果是根目录，只需要修改成/即可
module.exports = {
  //这时输出的目录会名为testWeb，并且访问项目时，路径中必须加前缀testWeb！！！
  publicPath: "/testWeb/",
  outputDir: "testWeb",
};

5、打包部署文件 npm

6、将打包部署后的文件放在 nginx/html 目录下

即 dist 文件夹（或者其它名字）放到 html 目录下面

注：也可以不放在 nginx 的 html 目录下面，放在任何地方都可以，但是要在 root 中注明！

7、修改 nginx 的配置文件：

// 方案一，publicPath:'/'，vue根目录名：dist，效果：访问/*或者/hao/*都是访问的html/dist/index.html文件
location / {

    root   html/dist; // 指向vue目录
    index  index.html index.htm; // index指向 html/dist/index.html文件
    try_files $uri $uri/ /index.html;
}
location /hao {

    alias html/dist; // 指向vue目录
    index index.html index.htm; // index指向html/testWeb/index.html文件
    try_files $uri $uri/ /dist/index.html; // 当找不到文件的时候，就会重定向到这个文件下
}

// 方案二，publicPath: '/testWeb/'，vue根目录名：testWeb，效果：访问/*或者/hao/*都是访问的html/testWeb/index.html文件
location / {

    root   html/testWeb; // 指向vue目录
    index  index.html index.htm; // index指向 html/dist/index.html文件
    try_files $uri $uri/ /index.html;
}
location /hao {

    // 这里的testWeb与4中所配置的路径一致
    alias html/testWeb; // 指向vue目录
    index index.html index.htm; // index指向html/testWeb/index.html文件
    try_files $uri $uri/ /testWeb/index.html; // 当找不到文件的时候，就会重定向到这个文件下
}

// 方案三：实现同一个端口部两套vue项目，通过根路径区分，一个目录名为dist，一个目录名为testWeb，访问/*就是第一个项目，访问/testWeb/*就是第二个项目 ——>前台、后台的方案推荐
location / {

    root   html/dist; // 指向vue目录
    index  index.html index.htm; // index指向 html/dist/index.html文件
    try_files $uri $uri/ /index.html;
}
location /testWeb {

    // 这里的testWeb与4中所配置的路径一致
    alias html/testWeb; // 指向vue目录
    index index.html index.htm; // index指向html/testWeb/index.html文件
    try_files $uri $uri/ /testWeb/index.html; // 当找不到文件的时候，就会重定向到这个文件下
}

除此之外还有很多方案可以任意改动，或者没必要配置两个路径，大多数情况下一个路径就够用了！

==需要注意的就是 root/alias 指定的目录的落脚点一定是和 vue 项目的根目录是同名的！==

例：root html/dist; 那么 vue 项目目录名必须是 dist

alias html/testWeb; 那么 vue 项目目录名必须是 testWeb

try_files 是用来解决 vue 项目在 nginx 部署，刷新 404 的问题（因为文件路径并非真实存在的，需要重定向到页面里）

try_files:当用户请求 localhost/example 时，这里的 root/example （其中 uri/，增加了一个 /，也就是看 有没有名为 /$root/example/ 的目录。 又找不到，就会 fall back 到 try_files 的最后一个选项 /index.html，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 localhost/index.html。

8、测试配置文件nginx -t

9、重启，载入新的配置文件nginx -s reload

10、此时打开 localhost/testWeb 就能看到页面了

tip

• root 和alias的区别：
  • root的处理结果是：root路径+location路径
  • alias的处理结果是：使用alias路径替换location路径 举个例子：

server {

    listen              8081;
    server_name         localhost;
    location /test {

         root   html;  // 此时访问localhost:8081/test 相当于访问 html/test/index.html
         index  index.html index.htm;
    }
    location /test {

        alias    html/; // 此时访问localhost:8081/test 相当于访问 html/index.html
        index  index.html index.htm;
    }
    location /test {

        alias    html/test/; // 此时访问localhost:8081/test 相当于访问 html/test/index.html
        index  index.html index.htm;
    }
}

总结：

其实用 nginx 部署 vue 项目，就是把 vue 项目当成了静态资源。

开发时我们的 vue 项目借助于 node 服务器运行，但是部署时我们的 vue 项目就借助于 nginx 服务器运行（放到 tomcat 部署也是可以的）！