Vite项目中符号链接文件引发导入错误求助
补充说明:我已创建演示该问题的Docker镜像:praisedare/vite-symlinked-file-error,问题底部附有Docker环境搭建说明。
项目目录结构
resources |-+ js/ |---+ components/ |---+ tenant/ |-----+ Pages/ |-----+ components/ |-----+ composables/ |-----+ app.js |-+ views/
问题描述
在Laravel/Vite项目中尝试为resources/js/tenant目录创建符号链接,但加载该目录下Vue文件的页面时,会出现错误:The specifier “vue (or any other import first encountered)” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.(中文释义:“vue(或首个遇到的任意导入模块)”为裸模块标识符,但未被映射至任何资源。相对模块标识符必须以“./”、“../”或“/”开头)。删除符号链接、直接复制文件夹后,一切恢复正常。
采用符号链接而非实际文件夹的原因:tenant目录的代码需在项目不同版本中保持一致,若复制文件夹,修改代码后需同步到所有版本,操作繁琐。
项目主文件app.js内容
import './bootstrap.js'; import '../../css/app.css'; import { createApp, h } from 'vue'; import { createInertiaApp } from '@inertiajs/vue3'; import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; import { ZiggyVue } from '../../../vendor/tightenco/ziggy/dist/vue.m'; import { createPinia } from 'pinia' import VueHtmlToPaper from 'vue-html-to-paper'; import VueApexCharts from "vue3-apexcharts"; createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), setup({ el, App, props, plugin }) { return createApp({ render: () => h(App, props) }) .use(plugin) .use(ZiggyVue, Ziggy) .use(pinia) .use(VueHtmlToPaper, printerSetup) .use(VueApexCharts) .mount(el); }, progress: { color: '#FFA500', }, });
复现方法
在任意Vite项目中,为存放视图(React、Vue等)文件的文件夹创建符号链接,即可触发相同错误。
Docker环境搭建步骤
操作步骤:
docker pull praisedare/vite-symlinked-file-error docker container run -it --name vite_so_question_demo -p"8000:8000" -p"5173:5173" praisedare/vite-symlinked-file-error bash # 进入项目目录 cd /var/www/laravel-vite-so-question # 启动服务 ./server.sh # 已预装tmux,可用于打开新窗口浏览项目 # 或后台启动服务: ./server.sh & # 后续停止服务: ./kill-server.sh # 注:已安装vim
随后在浏览器访问localhost:8000/vite,打开控制台即可看到类似上述的错误信息。
内容的提问来源于stack exchange,提问作者Praise Dare
相关产品推荐
相关产品推荐

