const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const postcssPxToRem = require("postcss-pxtorem")
// function resolve(dir) {
//   return path.join(__dirname, dir);
// }

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  // lintOnSave:false,
  // devServer:{
  //   host:'0.0.0.0',
  //   port:8080,
  //   client:{
  //     webSocketURL:'ws://0.0.0.0:8080/ws',      
  //   },
  //   headers:{
  //     'Accept-Control-Allow-Origin':'*',
  //   }
  // },
  chainWebpack: config => {
    //svg图标加载
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
      //.exclude.add(resolve('src/icons'))
      .end()

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

  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            postcssPxToRem({
              rootValue: 16, // 基准值，根据设计稿调整
              propList: ['*'], // 需要转换的属性，这里设置为全部
            })
          ]
        }
      }
    }
  }

})