peko-admin-web/vue.config.js

// 引入 Vue CLI 的 defineConfig 方法
const { defineConfig } = require('@vue/cli-service')
// 引入 webpack
var webpack = require('webpack')
// 引入 unplugin-auto-import 插件的 webpack 版本
var AutoImport = require('unplugin-auto-import/webpack')
// 引入 unplugin-vue-components 插件的 webpack 版本
var Components = require('unplugin-vue-components/webpack')
// 引入 Element Plus 的解析器
var { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
  // 禁用多线程
  parallel: false,
  // 配置需要转译的依赖
  transpileDependencies: true,
  // 使用 chainWebpack 自定义 webpack 配置
  chainWebpack: config => {
    config
      .plugin('html') // 配置 html-webpack-plugin 插件
      .tap(args => {
        args[0].title = 'MOLISTAR管理后台' // 设置网页标题
        return args
      })
  },
  // 配置 webpack 插件
  configureWebpack: {
    plugins: [
      // 配置 ProvidePlugin，自动加载模块
      new webpack.ProvidePlugin({
        $: 'jquery', // 自动加载 jquery
        jQuery: 'jquery',
        'windows.jQuery': 'jquery',
        Popper: ['popper.js', 'default'] // 自动加载 popper.js
      }),
      // 配置 unplugin-auto-import 插件，自动导入 API
      AutoImport({
        resolvers: [ElementPlusResolver()], // 使用 Element Plus 解析器
      }),
      // 配置 unplugin-vue-components 插件，自动注册组件
      Components({
        resolvers: [ElementPlusResolver()], // 使用 Element Plus 解析器
      }),
    ],
  },
  // 配置开发服务器
  devServer: {
    port: 8081, // 设置开发服务器端口
    headers: {
      'Access-Control-Allow-Origin': '*', // 允许跨域请求
    },
    proxy: {
      '/': {
        ws: false, // 禁用 WebSocket
        target: process.env.VUE_APP_API_BASE_URL, // 设置代理目标地址
        changeOrigin: true, // 修改请求的源
        pathRewrite: {
          '^/': '' // 重写路径，去掉根路径
        }
      }
    },
    client: {
      // 当出现编译错误或警告时，是否在浏览器中显示全屏覆盖
      overlay: false // 示例为只显示错误信息
    },
  },
})