如何使用 VueJS3 语法重写我的 VueJS2 组件？

Question

我已经将我的 Laravel 5.8 升级到 Laravel 9，现在我正在使用ViteJS而不是laravel-mix 。 我的 Vue 组件现在看起来有些过时了：

Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
19:24:27 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
  Plugin: vite:import-analysis
  File: /Users/marcellopato/Documents/Sites/wb9/resources/js/components/UploadForm.vue:6:101
  4  |              <input type="file" name="image" class="" @change="GetImage" accept="image/*">
  5  |              <img :src="avatar" alt="Imagem" class="drop">
  6  |              <a href="#" v-if="loaded" class="btn btn-success m-t-10" @click.stop="Upload">Enviar</a>
     |                                                                                                      ^
  7  |              <a href="#" v-if="loaded" class="btn btn-danger m-t-10" @click.stop="Cancel">Cancelar</a>
  8  |              <span class="custom-file-control text-muted"><slot></slot> CPF: <span v-text="cpf"></span></span>
      at formatError (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41235:46)
      at TransformContext.error (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41231:19)
      at TransformContext.transform (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39475:22)
      at async Object.transform (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:30)
      at async loadAndTransform (file:///Users/marcellopato/Documents/Sites/wb9/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29)

我确实安装了@vitejs/plugin-vue插件并导入了app.js文件，如下所示：

import '@vitejs/plugin-vue'; 但看起来它不起作用。 它应该重新编写 my.vue 文件吗？ 或者我应该自己重写？ 有指南可循吗？

Answer 1

更新你的package.json和你的vite.config.js文件如下

package.json :

"@vitejs/plugin-vue": "^3.2.0",
"vite": "^3.0.0",

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',
        },
    },
});