简体   繁体   中英

Vue.js vite build

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM