H5W3
当前位置:H5W3 > 其他技术问题 > 正文

[VUE CLI3] 多页面devServer 跳转 返回html错误问题

问题描述

最近尝试把项目脚手架从vue-cli2 webpack2 更新到vue/cli 3 webpack4

clipboard.png

由于之前项目是多页面,在用脚手架生成了项目目录之后, 在vue-cli-service serve开发环境时发现了一些问题。

工程里有两个页面indexlogin, 也配了两个入口。但在默认页面中路由跳转都正常,但我点击按钮 通过window.location.href = '/login' 访问另一个页面login时,返回的资源依然是index.htmlindex.js

只有通过更改url访问 localhost:3007/login.html时,url会变成localhost: 3007/login/.html

这时候才会返回login.htmllogin.js

PS:通过 build打包之后访问后台(nodejs)访问一切都正常。

clipboard.png

clipboard.png

clipboard.png

项目目录

clipboard.png

问题出现的环境背景及自己尝试过哪些方法

相关代码

vue.config.js

module.exports = {
  devServer: {
    port: 3007,
    host: 'localhost',
    open: true,
    proxy: {
      '/api': {
        target: 'localhost: 3333',
        changeOrigin: true,
        // ws: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },
  chainWebpack: config => {
  },
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块,默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    login: {
      entry: 'src/login.js',
      template: 'public/login.html',
      filename: 'login.html',
      title: '登陆',
      chunks: ['chunk-vendors', 'chunk-common', 'login']
    },
    // 当使用只有入口的字符串格式时,
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话,就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    // subpage: 'src/subpage/main.js'
  },
}

你期待的结果是什么?实际看到的错误信息又是什么?

回答:

找到方法了

既然是开发环境配置,估计和devServer有关,查看了webpack4官网关于devServer的部分,找到了devServer.historyApiFallback

看到了这部分

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },
        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' }
      ]
    }
  }
};

恍然大悟,对于特定路由,可以指定静态资源。
所以把vue.config.js 改为了如下

module.exports = {
  devServer: {
    port: 3007,
    host: 'localhost',
    open: true,
    historyApiFallback: {
      rewrites: [
        { from: /^\/login/, to: '/login.html' },
      ]
    },
    proxy: {
      '/api': {
        target: 'localhost: 3333',
        changeOrigin: true,
        // ws: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },
  chainWebpack: config => {
  },
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块,默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    login: {
      entry: 'src/login.js',
      template: 'public/login.html',
      filename: 'login.html',
      title: '登陆',
      chunks: ['chunk-vendors', 'chunk-common', 'login']
    },
    // 当使用只有入口的字符串格式时,
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话,就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    // subpage: 'src/subpage.js'
  },
}

这样当我 window.location.href = '/login'时,匹配到login,静态资源就会返回login.html, 而且 若login页面若有多个路由时,login/route1login/route2也会正常匹配。

回答:

看一下我这篇多页:https://segmentfault.com/a/11…

github 多页的 demo:https://github.com/dailynodej…

本文地址:H5W3 » [VUE CLI3] 多页面devServer 跳转 返回html错误问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址