Strange route with publicPath config in 5.0.0-rc.1

sherry2h commented 2 years ago

Version

5.0.0-rc.1

Reproduction link

Environment info

 "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
    "@vue/cli-plugin-vuex": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "lint-staged": "^11.1.2",
    "prettier": "^2.4.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "~4.1.5",
    "vue-template-compiler": "^2.6.14"
  }

"dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
    "@vue/cli-plugin-vuex": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "lint-staged": "^11.1.2",
    "prettier": "^2.4.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "~4.1.5"
  }

Steps to reproduce

Trying to use Module federation with Vue and vue-router, however, if it is with publicPath set up, the actual route becomes weird.

use vue-cli to create a new Vue app with vue-router

set publicPath and devServer port in vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
publicPath: "http://localhost:9001/",
devServer: {
port: 9001,
},
});

Run the app via npm run serve For Vue 2 app, the route looks ok on the home page, which is http://localhost:9001 When navigating to the about page, the route becomes http://localhost:9001/http:/localhost:9001/about When navigating back to the home page from the about page, the route becomes http://localhost:9001/http:/localhost:9001/

For Vue 3 app, the route is already http://localhost:9001/http://localhost:9001/ on the home page by default. Navigating behaves the same as Vue 2 app, showing duplicated http://localhost:9001/.

What is expected?

No duplication in the actual route

What is actually happening?

showing http://localhost:9001/http://localhost:9001/ instead of http://localhost:9001/

If the project is set up with Webpack 5 and vue-router, the route is all good

SkyWalker653 commented 2 years ago

Experiencing the same issue.

schirrel commented 2 years ago

I am having the same problem

gabrielpuscuta commented 2 years ago

I had the same issue in context of federated modules and it seems that it's caused by the "BASE_URL" env parameter. Set the "base" parameter from the router to "/" and the problem should be solved.

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

vuejs / vue-cli