He creado el siguiente código en el enrutador Vue y funciona perfectamente en Vue-CLI.
import store from "./../../store/index.js"; function getView(view) { return () => import(`@/views/settings/${view}.vue`); } const routes = [ { path: "/myProfile", name: "MyProfile", component: getView("MyProfile"), beforeEnter: (to, from, next) => { document.title = "Profile - " + store.getters.getAppName; if (store.getters["userStore/authenticated"]) { next(); } else { next({ name: "Home" }); } }, } ] export default routes;Ahora estoy reemplazando Vue-CLI con Vite y da el siguiente error.
TypeError: Failed to resolve module specifier '@/views/settings/MyProfile.vue'Cuando elimino la función getView ("MyProfile") y uso directamente la importación como se muestra a continuación, funciona.
const routes = [ { path: "/myProfile", name: "MyProfile", component: () => import('@/views/settings/MyProfile.vue'), beforeEnter: (to, from, next) => { document.title = "Profile - " + store.getters.getAppName; if (store.getters["userStore/authenticated"]) { next(); } else { next({ name: "Home" }); } }, } ]¿Puede alguien, por favor, explicar por qué?
¿Puede alguien, por favor, explicar por qué?
Esto se debe a las limitaciones de resumen. Todas las importaciones deben comenzar en relación con el archivo de importación y la importación no debe comenzar con una variable .
Entonces, para que la función GetView() funcione, debe reemplazar el alias ( @/ ) con la ruta relativa o absoluta ../views o /src/views :
function getView(view) { return () => import(`../views/settings/${view}.vue`); }¿Por qué funciona cuando eliminas
getView()y escribes directamente la directiva deimport?
Si establece una cadena literal, el alias se resuelve (termina en una ruta relativa o absoluta, respetando el requisito de acumulación) .