vue部署到nginx

nginx
1、安装nginx
2、到nginx的安装目录下使用 start nginx启动nginx服务
3、nginx的主配置文件在/conf/nginx.conf
4、修改vue项目里的vue.config.js的配置文件

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

// 值根据你所需要部署的项目路径来，如果是根目录，只需要修改成/即可
module.exports = {
  publicPath: '/testWeb/'
}

5、打包部署文件 npm
6、将打包部署后的文件放在nginx/html目录下
7、修改nginx的配置文件

// 同一个端口部两套vue项目，通过根路径区分
// 第一套项目，publicPath:'/'
location / {
     root   html/dist; // 指向vue目录
     index  index.html index.htm; // index指向 html/dist/index文件
     try_files $uri $uri/ /index.html;
}
// 第二套项目，publicPath: '/testWeb/'
location /testWeb { // 这里的testWeb与4中所配置的路径一致
    alias html/testWeb;// 指向vue目录
    index index.html index.html;// index指向html/testWeb/index.html文件
    try_files $uri $uri/ /testWeb/index.html; // 当找不到文件的时候，就会重定向到这个文件下
}

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

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