Laravel10+Vue项目异常：找不到app.js，替换@vite后OpenLayers失效

一、为什么 URL::asset('/js/app.js') 找不到文件？ #

Laravel 10 默认用 Vite 替代了传统 Mix 构建工具，两者资源处理逻辑完全不同：

• 开发模式下，Vite 不会把资源编译到 public/js 目录，而是通过自身开发服务器（http://localhost:5173）代理加载资源。
• 生产环境编译后，资源会输出到 public/build 目录，文件名还带哈希值（比如 app.abc123.js），URL::asset 无法识别这种动态命名的文件。

所以必须用 Laravel 提供的 @vite 指令加载资源，这是适配 Vite 的正确方式。

二、使用 @vite 后 OpenLayers 地图不显示的解决步骤 #

1. 确认 OpenLayers 的正确导入与依赖安装 #

先确保已安装 OpenLayers：

npm install ol

在 Vue 组件或 resources/js/app.js 中，必须同时导入 OpenLayers 的 JS 和 CSS：

// 导入OpenLayers样式
import 'ol/ol.css';
// 导入需要的OpenLayers模块
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

2. 配置 Vite 优化 OpenLayers 依赖 #

OpenLayers 是较大的库，Vite 需要显式优化它的依赖。修改 vite.config.js：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
  // 添加优化配置
  optimizeDeps: {
    include: ['ol'],
  },
});

3. 确保地图容器有明确的宽高样式 #

地图无法显示最常见的原因之一是容器没设置宽高，导致渲染区域为0。在 Vue 组件中给容器设置样式：

<template>
  <!-- 必须设置宽高，否则地图无法渲染 -->
  <div id="map" style="width: 100%; height: 600px;"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

onMounted(() => {
  // 在组件挂载后初始化地图
  new Map({
    target: 'map',
    layers: [
      new TileLayer({
        source: new OSM(), // 使用OpenStreetMap瓦片
      }),
    ],
    view: new View({
      center: [0, 0],
      zoom: 2,
    }),
  });
});
</script>

4. 确保正确启动服务 #

• 启动 Laravel 服务：php artisan serve
• 同时启动 Vite 开发服务器：npm run dev
  两者必须同时运行，Vite 负责处理资源编译与代理，缺一不可。

5. 检查 Blade 模板中的 @vite 指令 #

确保模板中正确加载了 CSS 和 JS 资源，比如 welcome.blade.php：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Map Demo</title>
    <!-- 同时加载CSS和JS资源 -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app"></div>
</body>
</html>

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