Laravel 10 + Vite环境下如何让dayjs全局可访问？

1. 先把dayjs的挂载代码写对 #

打开resources/js/app.js，按下面的方式导入并挂载，要是用到dayjs插件的话也得一起处理：

import dayjs from 'dayjs';
// 举个例子，如果你要用到自定义格式解析插件，得先导入再扩展
import 'dayjs/plugin/customParseFormat';

dayjs.extend(window.dayjs_plugin_customParseFormat);

// 把dayjs挂载到全局window上
window.dayjs = dayjs;

2. 必须保证脚本加载顺序 #

你的页面自定义<script>标签，一定要放在Vite生成的app.js之后加载。比如在布局模板里：

<!-- 先加载Vite打包的app.js -->
@vite(['resources/js/app.js'])

<!-- 再写你自己的页面脚本 -->
<script>
  // 这里就能正常调用dayjs了
  const formattedDate = dayjs('01/05/2024', 'DD/MM/YYYY').format('YYYY-MM-DD');
  console.log(formattedDate);
</script>

要是你的自定义脚本跑在Vite脚本前面，这时候dayjs还没挂载到window，肯定会报dayjs is not defined。

3. 清缓存解决热更新异常 #

Vite热更新偶尔会出缓存问题，试试这几步：

• 关掉Vite服务，删掉public/build文件夹
• 重新执行npm run dev或者npm run build
• 清空浏览器缓存再刷新页面

4. 检查全局挂载是否生效 #

打开浏览器控制台直接输入window.dayjs，要是返回函数就说明挂载成功了。要是提示“dayjs is not a function”，大概率是缓存导致旧代码没更新，或者你代码里有别的地方修改了window.dayjs变量。

你之前误写成windows.dayjs()报错，那是拼写错误（应该是window不是windows），但这个错误提示也说明window上的dayjs可能不是正常的函数类型，核心还是加载顺序或者缓存的问题。

内容的提问来源于stack exchange，提问作者Ray