vue中的vue.config.js相关配置和代码

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

module.exports = defineConfig({
  publicPath: '/', // 应用程序的基础 URL，默认值是 '/'
  outputDir: 'dist', // 构建输出目录，默认值是 'dist'
  assetsDir: 'static', // 静态资源目录 (js, css, img, fonts)，默认值是 'static'
  indexPath: 'index.html', // 指定首页文件，默认值是 'index.html'
  filenameHashing: true, // 是否启用文件名哈希，默认值是 true
  productionSourceMap: true, // 是否在生产环境下生成 source map，默认值是 true
  css: {
    extract: true, // 是否将 css 提取到单独的文件中，默认值是 true
    sourceMap: false, // 是否在开发模式下启用 source map，默认值是 false
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";` // 给 Sass 全局变量传递参数
      }
    }
  },
  devServer: {
    port: 8080, // 指定开发服务器的端口号，默认值是 8080
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 配置代理的目标地址
        changeOrigin: true, // 是否改变代理请求的主机头（hostname），默认值是 false
        pathRewrite: { '^/api': '' } // 路径重写规则
      }
    }
  },
  chainWebpack: config => {
    // 扩展 webpack 配置
    config.module.rule('md')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()

    // 更改 TypeScript 的编译选项
    config.module.rule('ts').uses.delete('cache-loader');
    config.module.rule('ts').use('ts-loader')
      .loader('ts-loader')
      .tap(options => {
        options.transpileOnly = true;
        options.happyPackMode = false;
        return options;
      });
  }
});