解决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

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

相关学习连接:
vue.config.js官网publicPath配置
Vue Router官网 HTML5 History模式