Laravel中如何在5173端口运行Vue（Vite开发服务器）

我正在学习Laravel，跟着全栈教程开发Laravel+Vue应用。用php artisan serve在8000端口启动Laravel一切正常，之后在src文件夹里创建了Vue应用，本该用npm run dev在5173端口启动，但打开后看不到默认Vue启动页面，只显示指定内容。

我的代码 #

App.vue #

import HelloWorld from "./components/HelloWorld.vue";
import { mapState } from "vuex";

export default {
    components: { HelloWorld },
    computed: { ...mapState(["user"]) },
};
</script>

<template>
    <div>
        <h2>Bok</h2>
        <pre>{{ user }}</pre>
    </div>
    <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

store/index.js #

const { createStore } = require("vuex");

const store = createStore({
  state: { user: { data: { name: "Zura" }, token: null } },
  getters: {},
  actions: {},
  mutations: {},
  modules: {},
});

export default store;

解决步骤 #

1. 补全Vue入口文件配置
   确保项目根目录下的src/main.js（或main.ts）正确完成Vue实例的创建、store注入和挂载，示例代码：

   import { createApp } from 'vue'
   import App from './App.vue'
   import store from './store/index.js'
   
   createApp(App).use(store).mount('#app')
   

   同时检查项目根目录的index.html是否包含挂载节点：<div id="app"></div>，Vite会将Vue应用挂载到这个元素上。

2. 确保依赖与服务正常启动

   • 执行npm install确认vue、vuex、vite等依赖全部安装完成；
   • 运行npm run dev，终端会输出Vite的访问地址（默认http://localhost:5173），直接访问该地址即可。若5173端口被占用，可通过npm run dev -- --port 5174指定其他端口启动。

3. 区分前后端架构模式

   • 若为前后端分离：Vue的5173端口与Laravel的8000端口独立运行，直接访问Vite给出的地址就能看到Vue应用；
   • 若为Laravel内嵌Vue（使用Laravel Vite插件）：需要确保vite.config.js配置正确，并在Laravel的blade模板中引入Vite资源：

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

     此时访问Laravel的8000端口即可加载Vue内容。

4. 调整页面显示内容
   当前你的App.vue模板中已经写了自定义的<h2>Bok</h2>和HelloWorld组件，启动后显示这些内容是正常的。如果想看到默认Vue启动页面，可将App.vue的模板替换为仅渲染HelloWorld组件，或确保HelloWorld.vue中包含默认的Vue logo及欢迎内容。

内容的提问来源于stack exchange，提问作者Skar