如何修改vue2leaflet的Script源为Neshan Leaflet SDK 1.4.0

Alright, let's break down how to swap out the default Leaflet SDK in your vue2leaflet setup with the specified Neshan-hosted Leaflet script. The process varies a bit depending on your project setup, so I'll cover the most common scenarios below:

1. Vue CLI / Webpack Projects #

If you're using a Vue CLI or Webpack-based project, follow these steps:

• Step 1: Add the Neshan Leaflet script and styles to your public HTML
  Open your public/index.html file and add the following lines inside the <head> section (styles first, then the script):

  <link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css">
  <script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>
  

• Step 2: Configure Webpack to use the global Leaflet instance
  Create or modify your vue.config.js file to tell Webpack to use the global L object instead of bundling the local Leaflet dependency:

  module.exports = {
    configureWebpack: {
      externals: {
        leaflet: 'L' // Maps the 'leaflet' import to the global L variable
      }
    }
  }
  

• Step 3: Remove the local Leaflet dependency (optional but recommended)
  If you previously installed Leaflet via npm/yarn, you can uninstall it to avoid conflicts:

  npm uninstall leaflet
  # Or for yarn:
  yarn remove leaflet
  

• Step 4: Use vue2leaflet as usual
  Your existing vue2leaflet components (like <l-map>, <l-tile-layer>) will now use the Neshan-hosted Leaflet SDK automatically.

2. Vite Projects #

For Vite-based Vue 2 projects, the process is similar with a slight configuration tweak:

• Step 1: Add the Neshan script and styles to index.html
  Same as above, add the CSS and script tags to your index.html in the <head> section.

• Step 2: Configure Vite to externalize Leaflet
  Modify your vite.config.js to alias Leaflet to the global L object and exclude it from dependency optimization:

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue2' // Use vue2 plugin for Vue 2 projects
  
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        'leaflet': 'L'
      }
    },
    optimizeDeps: {
      exclude: ['leaflet']
    }
  })
  

• Step 3: Uninstall local Leaflet (optional)
  Run the same uninstall command as in the Vue CLI section to remove the local dependency.

3. CDN-Based Vue Projects #

If you're using Vue via CDN (no build tool), the key is to load scripts in the correct order:

• Load scripts in this exact order:

  <!-- Leaflet styles first -->
  <link rel="stylesheet" href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css">
  <!-- Neshan Leaflet SDK -->
  <script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js"></script>
  <!-- Vue 2 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- vue2leaflet -->
  <script src="https://unpkg.com/vue2-leaflet@2.7.1/dist/vue2-leaflet.js"></script>
  

• Use the components in your Vue app:
  You can register vue2leaflet components directly from the global Vue2Leaflet object:

  <div id="app">
    <l-map :zoom="13" :center="[35.6892, 51.3890]">
      <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer>
    </l-map>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      components: {
        LMap: Vue2Leaflet.LMap,
        LTileLayer: Vue2Leaflet.LTileLayer
      }
    })
  </script>
  

Important Notes #

• Version Compatibility: vue2leaflet v2.x is fully compatible with Leaflet 1.4.0, so you won't run into version mismatch issues here.
• Neshan Map Tiles: If you want to use Neshan's own map tiles instead of OpenStreetMap, replace the tile layer URL with Neshan's official tile URL (you may need an API key for this, depending on their service terms).

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