const path = require('path')


const resolve = (dir) => path.join(__dirname, dir)

const name = 'vue3 Element-plus' // page title


const mockServer = () => {
  if (process.env.NODE_ENV === 'development') return require('./mock')
  else return ''
}

module.exports = {
  publicPath: '/',
  productionSourceMap: false,
  // outputDir: 'vueDemo',
  lintOnSave: true,
  devServer: {
    open: false,
    port: 8088,
    overlay: {
      errors: true,
      warnings: false,
    },
		proxy: {
			"/xxapixx": {
				target: "http://xxx.xxxxx.com/api",
				ws: true,
				secure: false, // 如果是https接口，需要配置这个参数
				changeOrigin: false, // 如果接口跨域，需要进行这个参数配置
				pathRewrite: {
					"^/api": ""
				}
			},
		},
    before: mockServer(),
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        '@assets': resolve('src/assets'),
        '@com': resolve('src/components'),
      },
    },
  },
  chainWebpack: (config) => {

    // 使用cdn文件，忽略打包,会导致无法加载对应map,会导致调试工具无法开启
    // if (process.env.NODE_ENV === "development") {
    //   config.externals({
    //     vue: "Vue",
    //     "vue-router": "VueRouter",
    //     vuex: "Vuex",
    //     axios: "axios",
    //     "element-plus": "ElementPlus"
    //   });
    // }

    // 配置 svg-sprite-loader
    // 第一步：让其他svg loader不要对src/icons进行操作
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons/svg')) // 注意：路径要具体到存放的svg的路径下，不然会报错
      .end()
    // 第二步：使用svg-sprite-loader 对 src/icons下的svg进行操作
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons/svg')) // 注意：路径要具体到存放的svg的路径下，不然会报错
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      // 定义规则 使用时 <svg class="icon"> <use xlink:href="#icon-svg文件名"></use>  </svg>
      .options({
        symbolId: 'icon-[name]',
      })
      .end()
  },
}