const { defineConfig } = require("@vue/cli-service"); const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, css: { loaderOptions: { less: { additionalData: '@import "@/design/var/index.less";@import "@/components/style/index.less";', }, }, }, chainWebpack: (config) => { config.module.rules.delete("svg"); // 重点:删除默认配置中处理svg config.module .rule("svg-sprite-loader") // rule 匹配规则 .test(/\.svg$/) // 用正则匹配 文件 .include // 包含 .add(resolve("src/icons")) // 处理svg目录 .end() .use("svg-sprite-loader") // 配置loader use() 使用哪个loader .loader("svg-sprite-loader") // 加载loader .options({ // [name] 变量。一般表示匹配到的文件名 xxx.svg // 注意： symbolId 在 <use xlink:href="#dl-icon-svg文件名" /> symbolId: "dl-icon-[name]", // 将所有的.svg 集成到 symbol中，当使用 类名 icon-文件名 }); }, });在这个代码里如何添加devServer和proxy

你可以通过在 `module.exports` 下面添加 `devServer` 和 `proxy` 配置来配置 `devServer` 和 `proxy`，具体如下：

const { defineConfig } = require("@vue/cli-service"); 
const path = require("path"); 

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

module.exports = defineConfig({   
  transpileDependencies: true,   
  lintOnSave: false,   
  css: {     
    loaderOptions: {       
      less: {         
        additionalData:           
        '@import "@/design/var/index.less";@import "@/components/style/index.less";',       
      },     
    },   
  },   
  chainWebpack: (config) => {     
    config.module.rules.delete("svg"); // 重点:删除默认配置中处理svg     
    config.module       
      .rule("svg-sprite-loader") // rule 匹配规则       
      .test(/\.svg$/) // 用正则匹配 文件       
      .include // 包含       
      .add(resolve("src/icons")) // 处理svg目录       
      .end()       
      .use("svg-sprite-loader") // 配置loader use() 使用哪个loader       
      .loader("svg-sprite-loader") // 加载loader       
      .options({         
        // [name] 变量。一般表示匹配到的文件名 xxx.svg         
        // 注意： symbolId 在 <use xlink:href="#dl-icon-svg文件名" />         
        symbolId: "dl-icon-[name]", // 将所有的.svg 集成到 symbol中，当使用 类名 icon-文件名       
      });   
  },
  
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  
  proxy: {
    '/foo': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      pathRewrite: {
        '^/foo': ''
      }
    }
  }

});

上面的代码中，`devServer` 和 `proxy` 都是在 `module.exports` 中添加的配置项，其中：

- `devServer` 用于配置本地开发服务器；
- `proxy` 用于配置代理请求；

这里的配置和之前的一样，你可以根据自己的需求进行修改。