screen-shibei-new/vue.config.js

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

//引入node.js核心模块path，意思是路径模块
const path = require('path')

////这个函数的意思就是拼接目录,__dirname,是node.js的固有的,意思是绝对路径的前缀👆🏻
function join(dir) {
  return path.join(__dirname, dir)
}

function diffOutputDir() {
  if (process.env.NODE_ENV === 'production') {
    return path.resolve(__dirname, '../screen-backend/app/public/frontend')
  } else if (process.env.VUE_APP_SCREEN === 'beta') {
    return 'screen'
  } else if (process.env.VUE_APP_SCREEN === 'dev') {
    return 'screen'
  }
}

function diffPublicPath() {
  if (process.env.NODE_ENV === 'production') {
    return '/public/frontend'
  } else if (process.env.VUE_APP_SCREEN === 'beta') {
    return '/vue_egg_ssr'
  } else if (process.env.VUE_APP_SCREEN === 'dev') {
    return './'
  }
}

module.exports = defineConfig({
  // 资源根路径
  // publicPath: diffPublicPath(), //部署应用包时的基本URL， 用法和webpack本身的output.publicPath一致.

  // 打包根路径
  // outputDir: diffOutputDir(), // npm run build  打包构建后存放的目录

  // 静态资源文件夹名
  assetsDir: 'static',

  // 保存时是否使用 eslint-loader
  lintOnSave: false,

  // 生产环境 source map
  productionSourceMap: false,

  // 调整 webpack 配置
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
    config.resolve.alias
      .set('api', join('src/api'))
      .set('assets', join('src/assets'))
      .set('components', join('src/components'))
      // .set('directives', join('src/directives'))
      // .set('filters', join('src/filters'))
      .set('store', join('src/store'))
      .set('style', join('src/style'))
      .set('utils', join('src/utils'))
    // .set('shibeiScreen', join('src/views'))

    // svg图标加载
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/components/svg-icon/svg'))
      .end()

    config.module
      .rule('icons') // 定义一个名叫 icons 的规则
      .test(/\.svg$/) // 设置 icons 的匹配正则
      .include.add(path.join(__dirname, 'src/components/svg-icon/svg')) // 设置当前规则的作用目录，只在当前目录下才执行当前规则
      .end()
      .use('svg-sprite') // 指定一个名叫 svg-sprite 的 loader 配置
      .loader('svg-sprite-loader') // 该配置使用 svg-sprite-loader 作为处理 loader
      .options({
        // 该 svg-sprite-loader 的配置
        symbolId: 'icon-[name]'
      })
      .end()

    // 修复HMR
    config.resolve.symlinks(true)
    // 打包结果分析
    if (process.env.NODE_ENV === 'development') {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
  },

  // 调整 webpack 配置
  // configureWebpack: (config) => {
  //   config.devtool =
  //     process.env.NODE_ENV === 'production' ? 'none' : 'cheap-eval-source-map'
  //   if (
  //     process.env.NODE_ENV === 'beta' ||
  //     process.env.NODE_ENV === 'production'
  //   ) {
  //     config.externals = {
  //       AMap: 'AMap',
  //       BMapGL: 'BMapGL',
  //       BMAP_EARTH_MAP: 'BMAP_EARTH_MAP',
  //       echarts: 'echarts',
  //       vue: 'Vue',
  //       'element-ui': 'ELEMENT',
  //       THREE: 'THREE',
  //       TWEEN: 'TWEEN'
  //     }
  //   } else {
  //     config.externals = {
  //       AMap: 'AMap',
  //       BMapGL: 'BMapGL',
  //       BMAP_EARTH_MAP: 'BMAP_EARTH_MAP',
  //       echarts: 'echarts',
  //       THREE: 'THREE',
  //       TWEEN: 'TWEEN'
  //     }
  //   }
  // },

  // css 相关
  css: {
    // 将组件内的 css 提取到 一个单独的文件
    // extract: true,
    // 是否开启 css source map
    sourceMap: false,
    // 为预处理器的 loader 传递自定义选项
    loaderOptions: {}
  },

  // 开发环境  dev-server
  // devServer: {
  //   open: false,
  //   host: '0.0.0.0',
  //   port: 8091,
  //   proxy: {
  //     '/api': {
  //       target: 'http://127.0.0.1:10001/api/',
  //       pathRewrite: {
  //         '^/api': ''
  //       },
  //       logLevel: 'debug',
  //       changeOrigin: true,
  //       secure: false
  //     },
  //     '/screenBaseUrl': {
  //       target: 'http://127.0.0.1:10001/',
  //       pathRewrite: {
  //         '^/screenBaseUrl': ''
  //       },
  //       changeOrigin: true,
  //       secure: false
  //     }
  //   },
  //   https: false,
  //   hotOnly: true,
  //   before: (app) => {}
  // },

  transpileDependencies: true
})