laravel10 引入vant4

很喜欢使用vant构建手机页面，下面是gpt4给的参考，完美通过；

但是也出了一个问题，运行 npm run dev 运行不起来，放0.0.0.0解析后就是0 0 0 0 ，网站也不能正常加载，npm run build可以的,我这个是云服务器，有遇到过的朋友留言指导一下十分感谢！

npm install --save-dev @vitejs/plugin-vue //安装VUE插件
npm i @vant/auto-import-resolver unplugin-vue-components -D  //vant插件

vite.config.js 文件以满足项目需求：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
    /*server: {
       host: 'www.xxxx.com',
       port: 51730,
       https: true,
   },*/
    plugins: [
        laravel(['resources/js/app.js']), // 确保这里是你的入口文件
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        Components({
            resolvers: [
                VantResolver({
                    // 这里可以有一些配置，如果你想要自定义它
                    // 比如 importStyle: 'less',
                }),
            ],
        }),
    ],
});

在这个配置中，你使用了 unplugin-vue-components 插件，并配置了 VantResolver 作为一个解析器，这将允许你在 Vue 组件中自动导入 Vant 组件而不需要手动导入它们。这意味着你可以直接在你的 .vue 文件中使用 <van-button> 等标签，而无需在 script 部分导入 Button 组件。

确保你的 resources/js/app.js 文件看起来像这样：

import { createApp } from 'vue';
import App from './App.vue'; // 你的根组件

const app = createApp(App);

// 这里不再需要手动注册 Vant 组件
// app.use(Button); // 不需要这行代码了

app.mount('#app');

在你的根组件 App.vue 或任何其他 .vue 文件中，你现在可以直接使用 Vant 组件：

<template>
  <div>
    <van-button type="primary">按钮</van-button>
  </div>
</template>

<script>
export default {
  // 组件的其余部分
};
</script>

确保你的 Blade 模板中有一个元素与 Vue 应用挂载的元素 ID 相匹配：

<div id="app"></div>

@vite('resources/js/app.js')

这样配置后，Vant 组件应该能够在你的 Vue 应用中自动导入，并且在你的 Laravel 应用中正确显示。如果你遇到任何问题，确保检查你的浏览器控制台中是否有错误，并查看网络请求以确保所有资源都被正确加载。

本作品采用《CC 协议》，转载必须注明作者和本文链接