手把手教 vue项目改history模式

zhuJuan
639 阅读3分钟

源于项目要改用微前端，需要把mode改为history,一直以来自己都是用的hash单页面，也就是大家熟知的路由地址都是以"#"形式展示。于是花了半天先把子应用先改起来。但为了防止自己之后忘记，还是先用文字记录。

第一步：就需要使用history模式。

只需在router文件夹下的index.js中加入

const router = new VueRouter({
  mode: 'history',
  base:  '', 
  routes
})

第二步，刷新页面发现js地址错误，在vue.config.js里配置publicPath

publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

对于hash模式，根路径是固定的，就是项目的根目录，但是history模式下，以 / 开头的嵌套路径会被当作根路径，所以使用“./”引入文件，就会找不到文件了，因为文件本身就是在项目根目录下的，并不在嵌套路径这个目录下。

第三步： 页面再刷新打开里有初始正常，但刷新页面就白屏。于是查看了一下路由的引用方式,直接采用import

//hash模式下的引用方法
//const ErrorPage = () => import('@/views/ErrorPage')

//history直接引页面地址
import ErrorPage from '@/views/ErrorPage'

【异常问题】history模式导致不能直接访问非根目录

又碰到问题了，当我进入项目的主页的时候'/'，一切正常，但如果刷新页面或者直接访问路径的时候，页面直接显示如下报错。



{"code":"-1","message":"服务内部错误","from":"pcloud","exceptionId":"c6c1214c-5e7e-457b-b0c6-816311ae2c8d"}

问题存在于vue.config.js中。我设置了proxy代理转发。而此时和router绑定出现了冲突。哪里出现了冲突呢？代理转发的地址根是”/“ 。 而，我们写地址的时候的根也是”/“，此时，把这个”/“改成”/api”即可。到时候后台也用API调用就可以了。例如:

 proxy: {
      '/': {   //老的写法
        target: 'http://172.17.0.154:7080/',
        ws: true,
        changeOrigin: 
      },
      '/api': { //改成新的这个
        target: 'http://172.17.0.154:7080/',
        ws: true, 
        changeOrigin: true,
          pathRewrite: {
          //重写路径
          '^/api': '' //把 /api 变为空字符
        }
      }
    }

第四步： 刷新切换页面正常，开发环境配置完成

第五步：打包到服务器，配置nigix , 打包注意publicPath，这个在打包后可以查看引用js,css等地址是否正确

image.png 我用了两个包，学习以下nginx

第六步： nginx配置 第一个是根目录，第二个是二级目录配置

try_files：是专门针对history的配置，二级目录需要根据目录地址配/sub/index.html root： 这是文件的目录配置，注意二级目录的，看上图我的二级目录的文件是和一级目录文件平级的，所以只用写到/Documents ,这里注意不要配错

   location / {
            try_files $uri $uri/ /index.html;
            root  "/Library/WebServer/main";
            index  index.html index.htm;
        } 
         location /sub {
            try_files $uri $uri/ /sub/index.html;
            root  "/Library/WebServer/Documents";
            index  index.html index.htm;
        }
小细节：配二级目录后我的页面打开就是404，找不到页面， 于是百度了只需在router的js文件里，把base改成二级目录地址:
const router = new VueRouter({
  mode: 'history',
  base:  process.env.NODE_ENV === 'development' ? '' : '/sub/', 
  routes
})

这样再打包生成就可以正常打开了！

avatar
文章
阅读
粉丝