How does vite2 use cdn to load packages such as vue

user_6472565 0
Viewed 86

The production environment reports an error, but the development environment is normal.

error:

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

vite.config.js is configured as follows

// Vue, etc. use cdn to load
      rollupOptions: {
        external: ['vue', 'vue-router'],
        plugins: [
          commonjs(),
          externalGlobals({
            vue: 'Vue',
            'vue-router': 'VueRouter',
          }),
        ],
      },
vue-class-components
1 Answers

The solution is as follows:

// vite.config.js
    // import plugin
    import commonjs from 'rollup-plugin-commonjs';
    import externalGlobals from 'rollup-plugin-external-globals';
    // modify rollup configuration parameters
      rollupOptions: {
        plugins: [
          commonjs(),
          externalGlobals({
            vue: 'Vue',
            'vue-router': 'VueRouter',
          }),
        ],
        output: {
          format: 'es',
          globals: {
            vue: 'Vue',
            'vue-router': 'VueRouter',
          },
        },
      },

// index.html
  <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.prod.js"></script>
user_192872990
Related