I have a router.js where all routes and components are in it. These are currently integrated via import. But now I want them to be reloaded with lazy load. I have also adapted this so far, for the time being only one route. Now I come to the problem, if I look at the via npm run dev it works, I build the project but now, I get the following error
uncaught ReferenceError: exports is not defined
I make now () => import() away and replace it with import the application works again after rebuild.
route.js
import {createRouter, createWebHistory} from 'vue-router'
import Dashboard from './pages/Dashboard.vue'
import PageNotFound from './pages/utility/PageNotFound.vue'
import Signin from './pages/Signin.vue'
import Signup from './pages/Signup.vue'
import ResetPassword from './pages/ResetPassword.vue'
import ResetPasswordToken from './pages/ResetPasswordToken.vue'
import Account from './pages/settings/Account.vue'
import store from "./utils/Store";
import axios from "axios";
import Domains from "./pages/products/Domains.vue";
const routerHistory = createWebHistory()
const logout = (to) => {
hidden code
const verifyLogin = () => {
hidden code
}
if(localStorage.getItem("token")){
window.setInterval(() => {
verifyLogin();
}, (1000 * 120));
}
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
component: Dashboard,
name: 'dashboard',
meta: {
requiresAuth: true,
}
},
{
path: '/products/domains',
name: 'products_domains',
//component: Domains,
component: () => import('./pages/products/Domains.vue'),
meta: {
requiresAuth: true,
}
},
{
name: 'logout',
path: '/logout',
beforeEnter: logout,
},
{
path: '/:pathMatch(.*)*',
component: PageNotFound
}
]
})
router.beforeEach((to) => {
// instead of having to check every route record with
// to.matched.some(record => record.meta.requiresAuth)
if (to.meta.requiresAuth) {
verifyLogin()
if (!localStorage.getItem("token")) {
logout(to)
}
} else if (to.meta.requiresGuest) {
if (localStorage.getItem("token")) {
router.push({
name: 'dashboard',
params: {
returnTo: to.path,
query: to.query,
},
});
}
}
})
export default router
main.js
import {createApp} from 'vue'
import router from './router'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueToast from 'vue-toast-notification';
import './css/style.scss'
import VueSweetalert2 from "vue-sweetalert2";
import 'sweetalert2/dist/sweetalert2.min.css';
import 'vue-toast-notification/dist/theme-sugar.css';
import Store from "./utils/Store";
const app = createApp(App)
app.use(router)
app.use(VueAxios, axios)
app.use(VueSweetalert2);
app.use(VueToast);
app.use(Store);
//app.component('font-awesome-icon', FontAwesomeIcon)
//TODO Change to plugin?
Store.commit("SET_API");
if (localStorage.getItem("token") && !Store.state.me.length) {
Store.dispatch("updateMe")
}
app.mount('#app')
Domains.vue
<script>
import Sidebar from '../../partials/Sidebar.vue'
import Header from '../../partials/Header.vue'
import axios from "axios";
import store from "../../utils/Store";
export default {
name: "Domains",
components: {
Sidebar,
Header,
},
data() {
return {
sidebarOpen: false,
products: {},
}
},
beforeMount() {
this.loadingProducts();
},
methods: {
loadingProducts() {
this.requestProducts().then(result => {
this.products = result.data.data;
});
},
requestProducts() {
return axios.get(store.state.apiDomain + 'products/domains', store.state.request.defaultAxiosConfig);
}
}
}
</script>
Here the full message and the code line
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.