VUE-cli3打包上线到Nginx服务器子目录以及http和https相关设置

一、VUE-cli3打包上线到Nginx服务器子目录

 

VUE-cli3 生成的项目，默认根目录下是没有vue.config.js文件的，需要手动建一个，然后添加publicPath参数即可。

如：

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/m/' : '/',
}

 

Nginx的配置如下：

location /API/ {
    proxy_pass http://localhost:5000;
}

location /m/ {
    root /usr/local/tomcat/webapps/VueWeb/;
    try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
    index  index.html index.htm;
}

location @router {
    rewrite ^.*$ /index.html last;
}

 

二、http和https相关设置

 

发布到线上后，服务器如果同时支持http和https访问的时候，Vue一般是前后端分离的，那么访问接口的地址要和页面地址的协议（http/https）保持一致，要不浏览器会报错。那么Vue使用接口公共地址的地方有两种修改方式：

1、地址不加协议

const APIBasePath = '//www.**.com/API';
const FileBasePath = '//www.**.com';

2、自动加上协议

let protocol = document.location.protocol;
const APIBasePath = protocol+'//www.**.com/API';
const FileBasePath = protocol+'//www.**.com';