vue history模式 部署在服务器端的nginx配置 (非根目录)

2024年3月1日 200次阅读 来源: 一叶知秋

vue history需要nginx或者其他方式配置一下才可正确访问，否则路由跳转之后刷新一下便会404 具体原因vue-router官网有说明，在此不多说

最近遇到的问题是上了一个小的项目，需要放在更深层次的目录下，上到测试环境 做了官网提到的nginx配置发现不行，之后查阅了一些博客资料，发现都没有一个特别好的方案。最终，我的解决方案如下

nginx配置如下

server {
        listen       443 ;
        server_name  m;
        
        root   html/mobile;
        location / {
            index  index.html index.htm;
            try_files $uri $uri/ /auth/index.html;
        }
    }

vue router 配置

// 路由配置
const RouterConfig = {
  base: "/auth/",
  mode: 'history',
  routes: routers
};

该项目是用的vue-cli2 所以只需要修改config 里面的index.js的build部分

webpack 配置修改

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/auth/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'auth/static',
    assetsPublicPath: '/',
    /**
     * Source Maps
     */
    productionSourceMap: false,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }

最终项目地址为 m.xxx.com/auth/

    原文作者：一叶知秋
    原文地址: https://segmentfault.com/a/1190000017009422
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞