vue3.0常用配置详解 vue.config.js

分手后的思念是犯贱 2021-09-02 10:25 1089阅读 0赞

在项目文件下的根目录创建 vue.config.js

module.exports = { 
      baseUrl: '', // 从 Vue CLI 3.3 起已弃用，请使用 publicPath
      publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
      // 输出文件目录
      outputDir: 'dist',
      // 静态资源目录 (js, css, img, fonts)
      assetsDir: 'assets',
      // 指定生成的 index.html 的输出路径
      indexPath: 'index.html',
      // lintOnSave：{ type:Boolean default:true } 是否使用 eslint
      lintOnSave: true,
      // productionSourceMap：{ type:Bollean,default:true } 生产源映射
      // 如果不需要生产时的源映射，那么将此设置为 false 可以加速生产构建
      productionSourceMap: true,
      // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
      transpileDependencies: [],
      // devServer: { type: Object } 3个属性 host, port, https, 它支持 webpack-dev-server 的所有选项
      css: { 
        loaderOptions: { 
          css: { 
            // 这里的选项会传递给 css-loader
          },
          postcss: { 
            // 这里的选项会传递给 postcss-loader
          }
        }
      },
      devServer: { 
        port: 8080, // 端口号
        host: 'localhost',
        https: false,
        open: false, // 配置自动启动浏览器
        overlay: {  // 浏览器 overlay 同时显示警告和错误
          warnings: true,
          errors: true
        },
        // 配置跨域处理
        proxy: { 
          '/api': { 
            target: 'http://localhost:8080',
            ws: true,
        	changeOrigin: true
          }
        }
      },
      // 用来传递任何第三方插件选项
      pluginOptions: { 
      }
    }