解决Vue CLI3 项目部署到非根目录下刷新空白问题

太久没来简书了，今天趁着假期把我那乱乱的笔记本重新整理整理~

如果你的前端项目使用Vue+Vue CLI开发,部署到服务器上你一定会遇到以下几个场景：

一、场景

本地正常的vue项目打包成dist文件，部署到测试环境服务器上，页面空白，无报错也无请求；
部署到服务器上第一页有页面，刷新后页面空白或404；
引入css的type被拦截装换为“text/plain”；

二、原因：

打包到服务器后，资源找不到路径，后台没有正确配置，用户在浏览器直接访问直接空白或404

三、思路：

前端部署路径publicPath是否正确;
前端路由模式是否配置正确；
后端配置是否正确；

四、解决方案：

假设打包后的dist文件内容需要部署到非根目录http.xxx.com/m子路径下，解决步骤如下：

1、修改vue.config.js中的publicPath

module.exports = {
  publicPath: "/m/", //打包后部署在一个子路径上http:xxx/m/
  productionSourceMap: false,
  devServer: {
    proxy: "http://xxxx.com", //测试或正式环境域名和端口号
  },
};

2、修改路由router的/index.js


const router = new VueRouter({
  mode: "history",//路由模式
  base: "/m/",//部署的子路径
  routes,
});

export default router;

3、后端同学帮忙配置

nginx配置：

location ^~/m {
        try_files $uri $uri/  /m/index.html;
    }

Apache配置：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

原生Node.js:

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

四、深入理解为什么？

1、publicPath

publicPath：部署应用包时的基本URL,默认是根目录./

默认情况下，Vue CLI打包后的dist会被部署到域名的根目录下，例如http:xxxx.com。
如果需要部署在一个子路径下，我们需要在publicPath选项中指定这个子路径，例如，我们需要部署在http:xxx.com/m/下，那么应该设置publicPath:'/m/'

publicPath详细说明请查看：
vue.config.js官网publicPath配置

2、vue的两种Router（路由）模式：History和Hash的简单理解和区别

vue的路由模式有两种：History和Hash

那这两种模式有什么区别呢？我们可以从URL中简单区分：

Hash模式URL：http://www.xxxx.com/index.html#test，修改#后边的参数不会重新加载页面，不需要后台配置支持
History模式URL：http://www.xxxx.com/index.html，需要后台配置支持

可以简单理解History模式跟Hash的区别就是URL不带#号，History需要后台配置支持

在URL中浏览器不会把#后边的参数传给服务端，使用Hash模式时后端同学也不需要单独处理，不会返回404页面，但是有时候自动会直接过滤#后边的参数，对应传参来说不够方便。
当使用History时URL中不带#，请求服务器时将整个URL发送给服务端，如果没有进行相关的路由配置处理，服务端会不认识，返回404或空白页面，所有使用History模式需要后台对路由地址进行相应的处理。
详细可以查看Vue Router官网 HTML5 History模式

History模式

3、Vue-Router构建选项配置：

const router = new VueRouter({
  mode: "history",//路由模式,hash | history | abstract
  base: "/m/",//部署的子路径,如果打包部署在/m/下，base应该设置为'/m/'，所有的请求都会在url之后加上/m/
  routes,
});

或者：当如果没有匹配到合适的路由，想要渲染点什么，可以提供一个空的子路由

const router = new VueRouter({
  mode: "history",
  base: '/m/',
  routes:[
     //如果没有匹配到合适的路由，想要渲染点什么，可以提供一个空的子路由
     {
      path:"",
      component:() => import("../components/Empty")
    }
  ]
});

image.png

只是简单小记，避免再有人踩坑，如有错误望指出，互相学习，共同进步~