启动开发服务器：

npm run dev   // 实际上跑的是 viteplus dev

打开浏览器访问 http://localhost:5173，Ru果kan到「Vite + Vue」的欢迎页，那就算成功啦！哈哈，咱就是说这一步基本没有坑。

viteplus.config.ts里自带 loadEnv 方法，只会读取以 VITE_ 开头的环境变量。

import { defineConfig, loadEnv } from 'viteplus';
export default defineConfig => {
  const env = loadEnv;
  return {
    server: {
      port: env.VITE_PORT || 5173,
      open: env.VITE_OPEN === 'true',
    },
    // ……其他配置
  };
});

Ehh，这个真的省事。只要把页面组件放进 /src/views 文件夹，VitePlus 会自动生成对应的路由配置。

其实大多数时候是因为站点没有Zuo好 SEO 基础设置，比如缺少 robots.txt、sitemap.xml，或者页面渲染是纯 SPA 没有 SSR。再加上百度爬虫对 JavaScript 支持不够完善，有时候等不到完整的 DOM 就直接丢掉了。解决办法hen简单：给项目加上服务端渲染或预渲染，同时在根目录放好 robots.txt 并提交 sitemap 给百度站长平台。这样搜索引擎就Neng抓到你的内容啦！哈哈，不对不对，这和 VitePlus 本身没直接关系，但Ru果你用 VitePlus 搭配 Nuxt 或者 VitePress Zuo文档站点，那就geng容易搞定啦。

Linter+ FormatterYi经内置在 VitePlus 里了。

export default defineConfig({
  lint: {
    fix: true,
    config: {/* ESLint 配置对象 */}
  },
  fmt: {
    write: true,
    config: {/* Prettier 配置对象 */}
  }
});

CICD 流程里只要跑一次 `viteplus lint`/`viteplus fmt`** 就Neng保证代码质量和统一风格。说实话，我每次提交前dou懒得手动跑 eslint，直接让 git hook 帮忙处理，省时省力！😁

npm run test   // 实际执行的是 viteplus test
# 或者 watch 模式
npm run test -- --watch

npm init -y
npm i -D vite-plus vue@next @vitejs/plugin-vue
npx create-vite-plus my-demo --template vue
cd my-demo
npm run dev

npm run build   # 实际走的是 viteplus build
npm run preview # 查kan产出效果