npm run dev如何启动在localhost/xxx下?

Question

背景:webpack+vue
问题:平时npm run dev时,浏览器会启动在http://localhost:3000
但现在有个需求,需要npm run dev时,希望启动在http://localhost:3000/xxx
该怎么弄呢?已尝试修改devServer中的contentBase和Publicpath,都没效果.

Answer 1

route v4的配置放在history的创建中了，一开始没找到，以下是更新后的内容

如果你要给页面链接统一加上一个路径前缀，那么你需要修改vue-router的路径配置，根据vue-router的版本不同，配置参数有所变化:

vue-router@4 #文档

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// history模式
const history = createWebHistory('/xxx/')
// hash模式
// const history = createWebHashHistory('/xxx/')
const router = createRouter({
    history,
    routes: [...]
})

vue-router@3 #文档

import VueRouter from 'vue-router'

const router = new VueRouter({
    base: '/xxx/',
    routes: [...]
})

Answer 2

刚好用过这用启动方式，主要两个地方：

• webpack dev server 配置：

  historyApiFallback: {
    index: '/xxx/index.html',
  },
  publicPath: '/xxx/',
  open: true,
  openPage: 'xxx/',

• router 配置，我使用的 react-router，basename = 'xxx'，你使用 vue，应有类似配置

Answer 3

1. webpack 配置中使用 publicPath，参考文档
2. vue-router 里增加 base 配置，参考文档
3. 学会查文档，可以解决大部分问题。