vue history 开发环境白屏

以下是搭建Vue开发环境并解决Vue history开发环境白屏问题的步骤：

1. 首先，确保你已经安装了Node.js和npm。你可以在终端中运行以下命令来检查它们的版本：

node -v
npm -v

2. 创建一个新的Vue项目。在终端中运行以下命令：

vue create my-project

根据提示选择你喜欢的配置选项。

3. 进入项目目录：

cd my-project

4. 安装Vue Router：

npm install vue-router@next

5. 在src目录下创建一个名为router.js的文件，并添加以下代码：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  // 添加你的路由配置
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

6. 在src目录下的main.js文件中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

7. 在src目录下的App.vue文件中添加以下代码：

<template>
  <router-view></router-view>
</template>

8. 在src目录下创建一个名为Home.vue的文件，并添加以下代码：

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

9. 在src目录下的router.js文件中添加以下代码：

import Home from './Home.vue'

const routes = [
  {
    path: '/',
    component: Home
  }
]

export default routes

10. 运行项目：

npm run serve

现在，你的Vue开发环境已经搭建完成，并且解决了Vue history开发环境白屏问题。