First of all, I just wanted to say that I am like three-days new to all of this. I do not have a dev background, just simple website building know-how. I was handed a project to problem solve, so I did not write any of this. This app I've been handed was written in Vue 2, and using help in the community here and Github, I've managed to update and compile things successfully using Vue 3.
The problem now is that I am encountering a blank page after running serve or build and I get the following errors in both Chrome and Brave (this is viewing the index.html file that's been uploaded onto the webdav):
Chrome:
Brave:
I don't know what any of this means, and I don't know what other information would be needed to help me troubleshoot this. I've seen other posts that have included the following information, so I'll put it here in case that helps anyone figure out what's going on.
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')vue.config.js
module.exports = {
publicPath: ''
}router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import HomePg from "../views/Home.vue";
import ResultsPg from "../views/Results.vue";
import { data } from "../data.js";
Vue.use(VueRouter);
import store from "../store";
console.log(store);
const routes = [
{
path: "/",
component: HomePg,
},
{
path: "/pathway/:level",
name: "pathway",
props: (route) => {
// console.log(route);
return {
question: data.pathways.find(
(pathway) => pathway.key == route.params.level
),
};
},
// route level code-splitting
// this generates a separate chunk (path.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "path" */ "../views/Path.vue"),
beforeEnter: (to, from, next) => {
//
console.log(from);
console.log({ store });
if (from.path == "/" || store.state.prevStep) {
next();
} else {
if (store.state.currentStep !== to.params.level) {
next("/");
} else {
next();
}
}
},
},
{
path: "/results",
name: "results",
component: ResultsPg,
beforeEnter: (to, from, next) => {
if (store.state.results.length < 1) {
next("/");
} else {
next();
}
},
},
{
path: "*", // not found....
beforeEnter: (to, from, next) => {
next("/");
},
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
scrollBehavior: (to, from, savedPosition) => {
return {
x: 0,
y: 0,
behavior: 'smooth'
};
},
});
export default router;App.vue
<template>
<div id="app">
<FoEHeader v-if="$route.path !== '/'" />
<transition name="path">
<router-view :key="$route.fullPath"/>
</transition>
</div>
</template>
<script>
import { mapState } from 'vuex';
import FoEHeader from "@/components/Header.vue";
export default {
name: 'App',
components: {
FoEHeader,
},
computed: {
...mapState({
results: state => state.results
})
},
}
</script>
<style lang="scss">
@font-face {
font-family: 'pdf';
src: url('./assets/fonts/DIN-Pro.otf') format('opentype');
font-weight: 400;
}
@font-face {
font-family: 'DIN-Pro';
src: url('./assets/fonts/DIN-Pro-Light.otf') format('opentype');
font-weight: 200;
}
@font-face {
font-family: 'DIN-Pro';
src: url('./assets/fonts/DIN-Pro-Medium.otf') format('opentype');
font-weight: 600;
}
@font-face {
font-family: 'DIN-Pro';
src: url('./assets/fonts/DIN-Pro-Cond-Black.otf') format('opentype');
font-weight: 900;
}
@font-face {
font-family: 'countach-bold';
src: url('./assets/fonts/Countach-Bold.otf') format('opentype');
font-weight: normal;
}
:root {
--c-red: #CC0633;
--c-red-secondary: #A6192E;
--c-black: #414042;
--c-light-grey: #F5F5F5;
--c-link: #6D6F71;
--font-countach: 'countach-bold';
--font-pdf: 'DIN-Pro';
}
.link {
color: var(--c-link);
}
.sr-only {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'pdf';
}
*,
*:before,
*:after {
box-sizing: border-box;
}
p {
margin: 0;
}
#app {
font-family: 'pdf', Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
min-height: 100vh;
overflow: hidden;
}
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 768px) {
.container {
padding: 0 2rem;
}
}
/* .path-enter-active, .path-leave-active {
transition: all .5s ;
} */
/* .path-enter,
.path-leave-to {
opacity: 1;
transform: translateY(0px);
} */
/*
.path-leave,
.path-enter-to {
opacity: 0;
transform: translateY(10px);
} */
</style>package.json
{
"name": "sfu-finder",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.25.0",
"vue": "^3.2.38",
"vue-router": "^4.1.5",
"vuex": "^4.0.2"
},
"devDependencies": {
"@babel/core": "^7.18.13",
"@babel/eslint-parser": "^7.18.9",
"@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-plugin-router": "~5.0.8",
"@vue/cli-plugin-vuex": "~5.0.8",
"@vue/cli-service": "~5.0.8",
"@vue/eslint-config-prettier": "^7.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^8.23.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.4.0",
"node-sass": "^7.0.1",
"prettier": "^2.7.1",
"sass": "^1.54.8",
"sass-loader": "^13.0.2",
"vue-template-compiler": "^2.7.10"
}
}I'm attempting to deploy this on a webdav and would really appreciate any help on this. Please let me know what else I can provide.
