vue项目多页面按需引入js和css如何配置

在 Vue 项目中实现多页面按需引入 JS 和 CSS 可以通过配置 `vue.config.js` 文件来实现。下面是一个基本的配置示例：

// vue.config.js
module.exports = {
  pages: {
    page1: {
      entry: 'src/pages/page1/main.js',
      template: 'public/page1.html',
      filename: 'page1.html',
      chunks: ['chunk-vendors', 'chunk-common', 'page1']
    },
    page2: {
      entry: 'src/pages/page2/main.js',
      template: 'public/page2.html',
      filename: 'page2.html',
      chunks: ['chunk-vendors', 'chunk-common', 'page2']
    }
  },
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'initial'
          },
          common: {
            name: 'chunk-common',
            minChunks: 2,
            priority: -20,
            chunks: 'initial',
            reuseExistingChunk: true
          }
        }
      }
    }
  }
};

上述配置中，我们定义了两个页面 `page1` 和 `page2`，每个页面对应一个入口文件、模板文件和输出文件。`chunks` 字段指定了当前页面需要引入的 chunk，可以根据需要自行调整。

在每个入口文件中，你可以按需引入需要的 JS 和 CSS 文件。例如，`src/pages/page1/main.js` 可以这样编写：

// src/pages/page1/main.js
import Vue from 'vue';
import App from './App.vue';
import './assets/css/page1.css';

new Vue({
  render: h => h(App)
}).$mount('#app');

这样配置后，运行 `npm run serve` 命令启动开发服务器时，会按需编译和生成对应的页面文件。运行 `npm run build` 命令打包构建时，会生成对应的多个 HTML 文件和相关的 JS 和 CSS 文件。

注意，配置文件的路径和文件名可能需要根据你的项目结构做相应的调整。