vue-cli2.x vue-cli3.x history nginx 服务器配置

自测有效

独立项目（项目在nginx的根目录）配置：

1. 项目路由中添加：mode: 'history'
2. 项目打包上传到 nginx 根目录（/html/）
3. nginx 配置：

    location / { 
        try_files $uri $uri/ /index.html 
    }

     重启 nginx 访问： http://xxx.xxx

 

子目录项目（项目在nginx子目录）配置：

     1、项目路由中添加： （如果想带入dist文件夹名称需一并写入（/xxx/dist））

    new VueRouter({ 
        mode: 'history',
        base: '/xxx' // xxx 表示项目在nginx的路径（项目根路径开始） 
        // base: '/xxx/xxx' // /xxx/xxx 表示项目在nginx的路径（项目根路径开始） 
    })

     2、项目路由中修改（/config/index.js）：（如果静态资源路径另行处理了，请忽略这一步）

        （所有的静态资源从根目录下的xxx中获取，达到"非根目录，静态资源不丢失"）

      assetsPublicPath: '/xxx' （xxx 和 1 中的base保持一致）

     3、项目打包上传到nginx的 /xxx 目录（目录需和 1 中的 base 保持一致）

     4、nginx 配置：(/xxx 需和 1 中的 base 保持一致)

    location ^~/xxx { (/xxx 需和 1 中的 base 保持一致) 
        root "F:/WWW/"; 
        try_files $uri $uri/ /xxx/index.html; (/xxx 需和 1 中的 base 保持一致) 
    }

     重启 nginx 访问： http://xxx.xxx/xxx

     vuecli3.x 配置基本相似就不另写了