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

Question

I'm working on a Vue JS, Node and Mongodb website with user management features. I implemented a "Reset Password" functionality: a user can access his profile page, press the reset password button and this will trigger a node functionaly, which is gonna send him an email containing a URL link pointing to a Vue JS component exposed to the public called "ResetPassword".

The URL has this format: /ResetPassword/<token_assiged_to_user> (for ex. /ResetPassword/5fa3ff9e87e0fdba7097e3bfb5e02e450ca1e1cf )

I tested the functionality locally and it works like a charm, the problem is than since I move the implementation to an actual testing server the ResetPassword page doesn't work anymore.

I marked as "public" the component in the index.js router file like this:

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

plus I'm using Vue-Router in my component to allow it to be exposed (here's just the beginning of the component):

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

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

The ResetPassword page doesn't even seem to be rendered while clicking the link and it appears entirely blank on the screen. The error "Uncaught SyntaxError: Unexpected token '<'" is displayed referred to the manifest file and here's the error that pops-up when I look at the console in the browser: console error

The routing configuration is set to "historymode" at the moment and I also implemented a fallback method to redirect towards our homepage.

Does anyone have an idea why this is happening? Am I missing something? I know Vue JS allows to only create some kind of "Single Page Applications", but I thought exposing a public component like I described could be feasible.

Thanks so much to everyone in advance.

UPDATE: Here follows the main.js file requested in the comments below:

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

I faced the same issue in my project!

Unable to acess links (copying and pasting) whitin my Site : Node.js - Express.js - Webpack - Vue.js - historymode

The problem was related to my weback.prod.conf.js file.

Try to add this info to your "output" attribue in your webpack conf file : publicPath: '/'

you should have something like this :

output: {
    publicPath: '/'
}