url - 参数中的 Vue Router Webpack Dot

Question

我正在使用 Vue Cli 和 webpack 创建一个应用程序，后台使用 NodeJS/Express，前台使用 VueJS。

我想知道是否有办法在我的路线的参数中加入点。

这是我在没有配置的情况下尝试得到的结果

Cannot GET /t/firstname.lastname

这是我的/src/main.js

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import VueAutosize from 'vue-autosize'

import Main from './components/Main.vue'
import Signin from './components/Signin.vue'

// We want to apply VueResource and VueRouter
// to our Vue instance
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(VueAutosize)

const router = new VueRouter({
  history: true
})

// Pointing routes to the components they should use
router.map({
  '/t/:person': {
    component: Main
  },
  '/signin': {
    component: Signin
  }
})

router.beforeEach(function (transition) {
  if (transition.to.path === '/signin' && window.localStorage.length !== 0) {
    transition.redirect('/')
  } else if (transition.to.path === '/' && window.localStorage.length === 0) {
    transition.redirect('/signin')
  } else {
    transition.next()
  }
})

// Any invalid route will redirect to home
router.redirect({
  '*': '/404'
})

router.start(App, '#app')

Answer 1

我正在处理同样的问题，即使我迟到了谈话，也许有人会发现我找到的解决方案很有用。

这似乎是 webpack 的错。

如果使用 vue-cli 的 webpack 模板，您需要为所需的路由配置代理。例如，在您的情况下，您需要将其添加到 config/index.js 文件中:

...
dev: {
  ...
  proxyTable: {
    '/t/*.*': { // this will match all urls with dots after '/t/'
      target: 'http://localhost:8080/',  // send to webpack dev server
      router: function (req) {
        req.url = 'index.html'  // Send to vue app
      }
    }
    // Any other routes you need to bypass should go here.
  }
  ...
},
...

通过这种方式，webpack 将代理所有对该 url 的请求，并且不会将这些请求视为文件。