createViteConfig 方法

实现思路:

  • 新增 vite.config.js 文件,设置项目的根路径、打包输出路径等等

  • 需要注意的是,这里额外设置了 components: path.resolve(__dirname, 'src/pages') ,这里是由于公共组件直接也可能是有互相引用的情况的,所以这里也进行托管,解决这个问题

实现代码

点击 展开/收起 jsx 代码
import fs from 'fs';
import path from 'path';

function createViteConfig() {
  const viteConfigPath = path.join(
    process.cwd(),
    'components-page',
    'vite.config.js',
  );

  const viteConfigContent = `
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  root: './src',
  base: './',
  build: {
    outDir: '../components-page',
  },
  server: {
    port: 3000,
    open: true, 
  },
  resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        pages: path.resolve(__dirname, 'src/pages'),
        components: path.resolve(__dirname, 'src/pages'),
      },
    },
});
  `;

  fs.writeFileSync(viteConfigPath, viteConfigContent.trim());
  console.log('------------------------------------------------------------');

  console.log(`vite.config.js 已经创建,请查看:${viteConfigPath}`);
}

export default createViteConfig;