[VUE CLI3] 多頁(yè)面devServer 跳轉(zhuǎn) 返回html錯(cuò)誤問(wèn)題

問(wèn)題描述

最近嘗試把項(xiàng)目腳手架從vue-cli2 webpack2 更新到vue/cli 3 webpack4

由于之前項(xiàng)目是多頁(yè)面，在用腳手架生成了項(xiàng)目目錄之后，在vue-cli-service serve開發(fā)環(huán)境時(shí)發(fā)現(xiàn)了一些問(wèn)題。

工程里有兩個(gè)頁(yè)面index和login, 也配了兩個(gè)入口。但在默認(rèn)頁(yè)面中路由跳轉(zhuǎn)都正常，但我點(diǎn)擊按鈕通過(guò)window.location.href = '/login' 訪問(wèn)另一個(gè)頁(yè)面login時(shí)，返回的資源依然是index.html和index.js

只有通過(guò)更改url訪問(wèn) localhost:3007/login.html時(shí)，url會(huì)變成localhost: 3007/login/.html

這時(shí)候才會(huì)返回login.html和login.js

PS:通過(guò) build打包之后訪問(wèn)后臺(tái)（nodejs）訪問(wèn)一切都正常。

項(xiàng)目目錄

問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

回答

編輯回答

舊言

找到方法了

既然是開發(fā)環(huán)境配置，估計(jì)和devServer有關(guān)，查看了webpack4官網(wǎng)關(guān)于devServer的部分，找到了devServer.historyApiFallback

看到了這部分

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

恍然大悟，對(duì)于特定路由，可以指定靜態(tài)資源。
所以把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',
      // 模板來(lái)源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當(dāng)使用 title 選項(xiàng)時(shí)，
      // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
      // 提取出來(lái)的通用 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']
    },
    // 當(dāng)使用只有入口的字符串格式時(shí)，
    // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
    // 并且如果找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
    // subpage: 'src/subpage.js'
  },
}

這樣當(dāng)我 window.location.href = '/login'時(shí)，匹配到login,靜態(tài)資源就會(huì)返回login.html, 而且若login頁(yè)面若有多個(gè)路由時(shí)，login/route1或login/route2也會(huì)正常匹配。

2018年6月23日 12:38

編輯回答