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和Vite。在终端中运行以下命令：

npm install vue-router@next vite --save

5. 创建一个`vite.config.js`文件并配置Vite。在项目根目录下创建一个`vite.config.js`文件，并添加以下内容：

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

export default defineConfig({
  plugins: [createVuePlugin()],
  server: {
    history: {
      // 解决白屏问题
      disableDotRule: true
    }
  }
})

6. 修改`main.js`文件。在`src`目录下找到`main.js`文件，并添加以下内容：

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 添加你的路由配置
  ]
})

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

7. 运行项目。在终端中运行以下命令启动开发服务器：

npm run dev

现在，你已经成功搭建了Vue开发环境，并解决了Vue history模式下页面刷新白屏的问题。