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

問題描述

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

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

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

只有通過更改url訪問 localhost:3007/login.html時，url會變成localhost: 3007/login/.html

這時候才會返回login.html和login.js

PS:通過 build打包之后訪問后臺（nodejs）訪問一切都正常。

項目目錄

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

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

回答

編輯回答

舊言

找到方法了

既然是開發(fā)環(huán)境配置，估計和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' }
      ]
    }
  }
};

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

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

2018年6月23日 12:38

編輯回答