我正在使用 Laravel 和 Vite 为我的资产构建一个项目。我想从 JS 文件加载位于 node_modules 文件夹中的文件:
Project
├── node_modules
├── public
│ ├── js
│ │ ├── my-file.js
├── vite.config.js
这是我的
vite.config.js
文件:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
'node_modules/fathom-client/dist/fathom-client.esm.js' // The file I am trying to import
],
refresh: true,
}),
],
});
我可以将其加载到
view.blade.php
文件中,如下所示:
@vite('node_modules/fathom-client/dist/fathom-client.esm.js');
但是,我想从位于公共目录中的
my-file.js
中的文件导入函数,如下所示:
import {
load as faLoad,
trackPageview as faPageView,
} from "the/module/";
我尝试在 vite 配置中创建别名并在没有相对路径的情况下导入模块,但这在每种情况下都会导致错误。
不幸的是我相信这是不可能实现的。位于
public
文件夹中的每个文件都被视为静态文件,并从公共 URL“按原样”提供。因此,据我了解,我们不能引用 node_modules
文件夹来包含我们想要的文件。
我发现的唯一解决方法是:
src
。在尝试从链接到静态
axios
文件的静态 main.js
文件导入 index.html
时,我遇到了同样的问题。为了解决这个问题,我将位于 axios.min.js
文件夹中的 node_modules/axios/dist/esm/
文件复制到 public
文件夹中。这是我的项目目录的概述:
Project
├── node_modules
├── public
│ ├── scripts
│ │ ├── main.js
│ │ ├── axios.min.js
│ ├── index.html
├── vite.config.js
这是我的
index.html
文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/styles/style.css" />
<script type="module" src="/scripts/main.js" defer></script>
</head>
<body>
<!-- Some code... -->
</body>
</html>
这是我的
main.js
文件:
// ❌ THIS DOES NOT WORK:
// import axios from 'axios';
// import axios from '../../node_modules/axios';
// ✅ THIS WORKS:
import axios from './axios.min.js';
const btnEl = document.querySelector('button');
btnEl.addEventListener('click', async () => {
const { data: message } = await axios.get('/check');
console.log('Message received from the backend:", message');
});
也许不是实现这一目标的最佳解决方案,但至少它对我有用。 希望这有帮助,祝你好运😉