Vite 和 VueJS3 and.mount('#app'); 不工作

Question

我一直在 inte.net 上阅读所有关于 Vite+VueJS3 在.mount("#app")点的问题的论坛和社区。 我正面临这个问题，不知道如何解决！

未捕获的 DOMException：字符串包含指向app.mount('#app'); Uncaught DOMException: String contains an invalid character ； 在app.js 。

让我们看一些代码： 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/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js',
        },
    },
});

app.js

import { createApp } from 'vue';
import Lead from './components/Lead.vue';
import Atendimento from './components/Atendimento.vue';

const app = createApp({
  components: {
    Lead,
    Atendimento,
    render: h => h(app)
  }
});

app.component('atendimento', Atendimento);
app.component('lead', Lead);
app.mount('#app');

app.blade.php witch all Blade extends 有<div id="app">更清楚，所以脚本的配置没有问题（我猜）。

你可以看到，在vite.config.js中有一个指向 dev 编译器的别名：

resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js',
        },
    },

现在我正在拔掉我所有的头发？ 谁能帮我？ 提前致谢！

Answer 1

由于无法解决这个问题，我决定从Vite迁移到Laravel-mix并使用ChatGPT来提供帮助。 看一下这个：

下面是在 Laravel 项目中从 ViteJS 迁移到 Laravel-mix 的步骤：

通过运行npm install laravel-mix 。 在项目的根目录下创建一个新文件webpack.mix.js 。 将以下代码复制到 webpack.mix.js 中：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

In your package.json file, change the scripts section from:

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

到：

"scripts": {
  "dev": "npm run development",
  "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
  "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

Remove the vite.config.js file, since Laravel-mix uses the webpack.mix.js file to configure webpack

Remove the vite package by running `npm uninstall vite`

Test the migration by running npm run dev and verify that your JavaScript and CSS assets are being compiled as expected.

就是这样。 您已成功从 ViteJS 迁移到 Laravel-mix。