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: ['*'], // 需要转换的属性，这里设置为全部
              })
            ]
          }
        }
      }
    }
    
})