javascript - vite.config.js rollupOptions 在构建过程中导致 "Unexpected token"错误

Question

我目前正在尝试将我的 laravel 项目从 laravel-mix 切换到 Vitejs 之类的东西。我按照此处提供的教程进行操作:https://owenconti.com/posts/replacing-laravel-mix-with-vite .对此的任何帮助将不胜感激。谢谢!
尝试运行时 npm 运行生产 我收到以下错误:

Unexpected token
file: /Users/celsoluiz81/Sites/batatolandia/node_modules/vite/dist/node/chunks/dep-971d9e33.js:56066:60
56064: const pendingModules = new Map();
56065: const pendingImports = new Map();
56066: async function ssrLoadModule(url, server, context = { global }, urlStack = []) {
                                                                   ^
56067:     url = unwrapId$1(url).replace(NULL_BYTE_PLACEHOLDER, '\0');
56068:     // when we instantiate multiple dependency modules in parallel, they may
error during build:
Error: Unexpected token
    at error (/Users/celsoluiz81/Sites/batatolandia/node_modules/rollup/dist/shared/rollup.js:159:30)
    at Module.error (/Users/celsoluiz81/Sites/batatolandia/node_modules/rollup/dist/shared/rollup.js:12437:16)
    at Module.tryParse (/Users/celsoluiz81/Sites/batatolandia/node_modules/rollup/dist/shared/rollup.js:12813:25)
    at Module.setSource (/Users/celsoluiz81/Sites/batatolandia/node_modules/rollup/dist/shared/rollup.js:12716:24)
    at ModuleLoader.addModuleSource (/Users/celsoluiz81/Sites/batatolandia/node_modules/rollup/dist/shared/rollup.js:22191:20)
[!] Error: unfinished hook action(s) on exit:
(commonjs) load "\u0000/Users/celsoluiz81/Sites/batatolandia/node_modules/vite/dist/node/chunks/dep-971d9e33.js?commonjs-proxy"

经过一番挖掘，我能够在我的 vite.config.js 中将错误隔离到这一行，更具体地说是 rollupOptions 部分:

 build: {
        outDir: resolve(__dirname, 'public/dist'),
        emptyOutDir: true,
        manifest: true,
        target: 'es2018',
        rollupOptions: {
            input: '/js/app.js'
        }
    },

当我删除 rollupOptions 部分时，我能够成功编译。
我的设置

v2.8.4

Vue 3.2.31

vite.config.js

import vue from '@vitejs/plugin-vue';
const { resolve } = require('path');
const Dotenv = require('dotenv');
Dotenv.config();

const ASSET_URL = process.env.ASSET_URL || '';
export default {
    plugins: [
        vue(),
    ],
    root: 'resources',
    base: `${ASSET_URL}/dist/`,

    server: {
        strictPort: true,
        port: 3000
    },
    build: {
        outDir: resolve(__dirname, 'public/dist'),
        emptyOutDir: true,
        manifest: true,
        target: 'es2018',
        rollupOptions: {
            input: '/js/app.js'
        }
    },
    resolve: {
        alias: {
            '@': '/js',
        }
    },

    optimizeDeps: {
        include: [
            'vue',
            'axios'
        ]
    }

}

应用程序.js

import 'vite/modulepreload-polyfill'
import './bootstrap';

/**
 * Vue
 */
import VueApp from './modules/main.module';

if (document.getElementById('app')) {
    VueApp();
}

Answer 1

确保使用 type="module" 加载生成的模块， IE。
代替:

<script src="/static/assets/index.f551f06e.js"></script>

它应该是:

<script type="module" src="/static/assets/index.f551f06e.js"></script>