Vue + webpack + nginx 部署在服务器非根目录

场景：钉钉跨域不能取storage，或者希望所有项目在一个域名下， 只是前缀不同

Vue webpack 配置修改

module.exports = {
  build: {
    assetsPublicPath: '/prefix/',     // 公共静态文件的路径前缀.
    //assetsPublicPath: '/',
  }
}

main.js 修改

const router = new Router({
    base:'/prefix/',     // 路由路径的前缀,需要和 config/index.js,nginx 中的配置保持一致.
    mode: 'history', // 切换路径模式，变成history模式
});

nginx配置文件：

// 定义了整个服务器相关配置 
server {
    listen 80;  // 监听80端口 
    server_name  f.xx.ssd.com;  // 服务端域名
    root  /data/app/test-test-test/dist/;   // 压缩包
    location / {       // 服务端不认识vue的路由配置
        try_files $uri /index.html;
    }
    location ^~ /prefix/ {   // 两个location块 分别针对不同项目进行配置
        alias   /data/app/项目文件夹名字1/dist/;
        index  index.html index.htm;
        try_files $uri $uri/ /prefix/index.html;

    }
    location ^~ /prefix2/ {
        alias   /data/app/项目文件夹名字2/dist/;
        index  index.html index.htm;
        try_files $uri $uri/ /prefix2/index.html;
    }
}

nginx -s reload 重启一下

原文