從 node.js 重定向 vue.js 上的頁面

Question

所以，我的 Vue.js 應用程序在localhost:8080上運行，我的 Node.js 服務器在localhost:3000上運行。 我正在實施重置密碼代碼，在其中生成令牌，然后將 email 發送到注冊的電子郵件 ID。 email 包含一個鏈接，如下所示： localhost:3000/auth/resetpassword/40700dc92bb7be1ccf65fb120294f30a3be0e5b9現在通過單擊此鏈接，我應該能夠將其路由到 vue-router，但我不知道該怎么做.

我還注意到我需要一個從localhost:8080開始的鏈接才能訪問我的 vue.js 應用程序。 那么有什么方法可以讓服務器呈現 vue.js 頁面？

謝謝你。

Answer 1

創建一個路由/auth/resetpassword/:id

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const Resetpassword = { template: '<p>Reset password</p>' }

const routes = {
  '/': Home,
  '/about': About,
  '/auth/resetpassword/:id' : Resetpassword
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

可以通過$route.params.id訪問

Answer 2

有很多方法可以讓服務器呈現 vue.js 頁面。 這取決於您對實際生產應用程序的需求。

方法 1：將您的 Vue 應用程序作為 static 資源提供

您只需將 webpack 捆綁包 output 路徑調整到 Node.js 公共目錄即可。 在您的 Node.js 服務器中將它們作為 static 文件（html 文檔、css、js...）提供，就像您擁有的任何多頁應用程序一樣。 因此，您必須定義 Vue 應用程序對您的 node.js 路由的所有路由規則，包括/auth/resetpassword/ 。 還要查看您的所有 static 資源路徑。 您可以通過localhost:3000/auth/resetpassword/訪問 vue 應用程序。

如果你使用 Vue CLI 3 並表達：

vue.config.js

// adjust bundle output path:
module.exports = {
  // ...
  outputDir: '../your-node-server/public/vue-app/',
  assetsDir: '../your-node-server/assets/',
  // ...
}

// and run `vue-cli-service build`

/your-node-server/routes.js

app.get('/auth/resetpassword/:token', function (req, res) {
  res.render('./public/vue-app/index.html');
});

// vue app may access some static assets e.g. http://localhost:3000/assets/logo.png
app.use('/assets', express.static(__dirname + '/assets'));

方法二：分離Vue app server和API server

您可以以相同的方式為 vue 應用程序提供服務。 通過調整提供反向代理的 nginx 配置，發出請求 url 以/api前綴訪問 localhost:3000，其他請求訪問 localhost:8080。

就像是：

等/nginx/conf.d

// ...
location /api {
    proxy_pass http://127.0.0.1:3000;
    // ...
}