windLifecontrolPro/vue.config.js

/*
 * @Date: 2023-06-18 10:09:15
 * @LastEditors: zhubj
 * @LastEditTime: 2023-06-19 10:49:41
 * @Description: 头部注释
 * @FilePath: \own-vue3-vuecli-template\vue.config.js
 */
'use strict'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const { defineConfig } = require('@vue/cli-service')

const name = process.env.VUE_APP_TITLE || '网页标题' // 网页标题

const port = process.env.port || process.env.npm_config_port || 8011 // 端口

// element-plus 按需导入自动导入的插件
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
// 实现 gzip 压缩打包
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = defineConfig({
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径
  // 例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录的内容在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
  outputDir: 'dist',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'static',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖（对所有的依赖都进行转译可能会降低构建速度）
  transpileDependencies: false,
  // webpack-dev-server 相关配置
    devServer: {
        client: {
            progress: true,
            overlay: false
        },
        host: '0.0.0.0',
        port: port,
        open: false,
        proxy: {
            // detail: https://cli.vuejs.org/config/#devserver-proxy
            // [process.env.VUE_APP_GENERAT_URL]: {
            //     // target: 'http://123.60.219.66:9002',
            //     target: 'http://192.168.2.12:9002',
            //     changeOrigin: true, //开启代理
            //     pathRewrite: {
            //         [process.env.VUE_APP_GENERAT_URL]: ''
            //     }
            // },
            // [process.env.VUE_APP_BASE_URL]: {
            //     target: 'http://123.60.219.66:8086',
            //     changeOrigin: true,
            //     pathRewrite: {
            //         [process.env.VUE_APP_BASE_URL]: ''
            //     }
            // }
        }
  },
  // 和webpapck属性完全一致，最后会进行合并
  configureWebpack:{
    name: name,
    resolve: {
        alias: {
            '@': resolve('src'),
            '@tools': resolve('./src/tools'),
            '@api': resolve('./src/api'),
            '@com': resolve('./src/components'),
        },
        fallback: {
            "https": false,
            "zlib": false,
            "http": false,
            "url": false
        },
        mainFiles: ['index', 'Cesium']
    },
    //配置webpack自动按需引入element-plus
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
      new CompressionPlugin({
        test: /\.(js|css|html)?$/i,     // 压缩文件格式
        filename: '[path][base].gz',   // 压缩后的文件名
        algorithm: 'gzip',              // 使用gzip压缩
        threshold: 10240,               // 最小文件开启压缩
        minRatio: 0.8                   // 压缩率小于1才会压缩
      })
    ],
  }
})