pk-mall/vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { svgBuilder } from './src/components/SvgIcon/svgBuilder'
const { resolve,path } = require('path')

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
// https://vitejs.dev/config/
export default defineConfig({
  productionSourceMap: false,
  lintOnSave: false, //关闭Eslint
  plugins: [
    vue(),
    svgBuilder('./src/assets/icon/') // svg图标批量引入
  ],
  configureWebpack: config => {
    config.plugins.push(
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          // 需要进行预渲染的路由路径
          routes: ['/about'],
          // html文件压缩
          minify: {
            minifyCSS: true, // css压缩
            removeComments: true // 移除注释
          },
          renderer: new Renderer({
            inject: {
              // foo: 'bar'
            },
            // 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。
            // renderAfterDocumentEvent: 'render-event'
            renderer: new PrerenderSPAPlugin.PuppeteerRenderer({ //这样写renderAfterTime生效了
              renderAfterTime: 5000
            })
          })
        })
    )
  },
  resolve: {
    alias: [
      // 别名配置
      {
        find: '@',
        replacement: resolve(__dirname, 'src')
      }
    ]
  },
  define: {
    buildTime: JSON.stringify(new Date().toLocaleString())
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve('src/assets/css/global.less')}";`
        },
        javascriptEnabled: true
      }
    }
  },
  server: {
    hrm: true,
    usePolling: true,
    // 服务器主机名
    host: 'localhost',
    // 端口号
    port: 3200,
    // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    // 服务器启动时自动在浏览器中打开应用程序,当此值为字符串时，会被用作 URL 的路径名
    open: false,
    // 自定义代理规则
    proxy: {
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})