vite---多页面

参考 blog.csdn.net/qq_38974163…

初始化项目 node@16 npm@8

npm create vue@latest

项目目录

├── public
├── src
 ├── coreCommon  
 ├── pages 多页面文件夹 
   ├── page1 某个页面
     ├── router
     ├── views
     ├── .env.development
     ├── .env.test
     ├── .env.production
     ├── App.vue
     ├── main.js
     ├── index.html   
├── package.json
├── vite.config.js
├── dist //打包输出目录
  ├── page1  //某个页面的最终产物

仅支持单页面运行和打包

• 运行或打包

npm run dev  --page=页面名称
npm run build --page=页面名称

• vite.config.js

import { fileURLToPath, URL } from 'node:url';
import fs from 'fs';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import chalk from 'chalk';


const errorLog = error => console.log(chalk.red(`${error}`));
const npmConfigPage = process.env.npm_config_page || '';
console.log('将要运行或打包的页面为', npmConfigPage);

function getEntryPath() {
  if (!npmConfigPage) {
    errorLog('命令行缺少参数 `--page=xxx` ');
    process.exit();
  }
  const pagePath = resolve(__dirname, './src/pages'); //指定要查询的目录
  const entryFiles = fs.readdirSync(pagePath);
  const find = entryFiles.some(filePath => npmConfigPage === filePath);
  if (!find) {
    errorLog('--page后面的页面不存在，请检查页面名称');
    process.exit();
  }
  return { npmConfigPage: resolve(__dirname, `src/pages/${npmConfigPage}/index.html`) };
}

export default ({ mode }) => {
  const env = loadEnv(mode, resolve(__dirname, `./src/pages/${npmConfigPage}`));
  console.log('env', env);
  return defineConfig({
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    build: {
      rollupOptions: {
        input: getEntryPath(), // 多页面入口
        output: {
          assetFileNames: '[ext]/[name]-[hash].[ext]', //静态文件输出的文件夹名称
          chunkFileNames: 'js/[name]-[hash].js', //chunk包输出的文件夹名称
          entryFileNames: 'js/[name]-[hash].js', //入口文件输出的文件夹名称
        },
      },
      // 输出的目录
      outDir: resolve(__dirname, `dist/${npmConfigPage}`),
      sourcemap: true, //是否开启源文件映射
    },
    //运行时的根目录 不改的话，1.每次运行时访问某个页面太麻烦 2.打包后dist文件夹层级太深（修改后，注意其带来的影响是环境变量文件等）
    root: resolve(__dirname, `./src/pages/${npmConfigPage}`),
  });
};