无法公开电子邮件中引用的 public 页面以让用户在 Vue JS、Node JS 和 Mongo 数据库网站结构中重置密码

Question

我正在开发具有用户管理功能的 Vue JS、Node 和 Mongodb 网站。我实现了“重置密码”功能：用户可以访问他的个人资料页面，按下重置密码按钮，这将触发一个节点功能，该节点将向他发送一封包含 URL link 指向的电子邮件暴露给名为“ResetPassword”的 public 的 Vue JS 组件。

URL 的格式为：/ResetPassword/ （例如 /ResetPassword/5fa3ff9e87e0fdba7097e3bfb5e02e450ca1e1cf ）

我在本地测试了该功能，它运行得非常好，问题是自从我将实施移至实际测试服务器后，ResetPassword 页面不再起作用。

我在 index.js 路由器文件中将组件标记为“public”，如下所示：

{
      path: '/ResetPassword/:token',
      name: 'ResetPassword',
      component: ResetPassword,
      meta: {
        public: true    
      }
}

此外，我在我的组件中使用了 Vue-Router 以允许它暴露（这里只是组件的开头）：

<script>
  import axios from "axios";
  import Vue from 'vue'
  import VueRouter from 'vue-router'

  Vue.use(VueRouter)
  export default {
    name: 'ResetPassword',
    props: {
      token: String
    },
[...]

单击 link 时似乎甚至没有显示 ResetPassword 页面，它在屏幕上显示为完全空白。显示错误“Uncaught SyntaxError: Unexpected token '<'”是指清单文件，这是当我在浏览器中查看控制台时弹出的错误： console error

目前路由配置设置为“historymode”，我还实现了一个回退方法来重定向到我们的主页。

有人知道为什么会这样吗？我错过了什么吗？我知道 Vue JS 只允许创建某种“单页应用程序”，但我认为像我描述的那样公开一个 public 组件是可行的。

在此先感谢大家。

更新：以下是评论中要求的 main.js 文件：

import App from './App'
import BackToTop from './components/BackToTopComponent'
import BootstrapVue from 'bootstrap-vue'
import Cookies from 'vue-cookies'
import router from './router'
import Vue from 'vue'
import VueMoment from 'vue-moment'
import VueSession from 'vue-session'


import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

const moment = require('moment')
require('moment/locale/it')



Vue.use(BootstrapVue)
Vue.use(Cookies)
Vue.use(VueSession)
Vue.use(VueMoment, { moment })
Vue.filter('siNo', value => (value ? 'Si' : 'No'))


Vue.config.productionTip = false
Vue.component('BackToTop', BackToTop)

Vue.prototype.$eventBus = new Vue()
Vue.prototype.$baseUrl = '{baseUrl}';

new Vue({
    el: '#app',
    router,
    components: { App, BackToTop },
    template: '<App/>'
})

Answer 1

我在项目中遇到了同样的问题！

问题与我的 weback.prod.conf.js 文件有关。

尝试将此信息添加到您的 webpack conf 文件中的“输出”属性中： publicPath: '/'

你应该有这样的东西：

output: {
    publicPath: '/'
}

无法公开电子邮件中引用的 public 页面以让用户在 Vue JS、Node JS 和 Mongo 数据库网站结构中重置密码

Unable to expose a public page referenced in an email to let users reset their password in a Vue JS, Node JS and Mongo db website structure

javascript

node.js

vue.js

single-page-application

reset-password