vue.config.js 个人配置

最新推荐文章于 2024-06-14 20:48:31 发布

原创最新推荐文章于 2024-06-14 20:48:31 发布 · 311 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Vue CLI3的配置方式，包括如何通过vue.config.js文件进行基础配置，如公共路径设置、输出目录、静态资源目录、代码检查、静态资源命名、生产环境源地图、开发服务器设置等内容。

vue-cli3将webpack的基础配置全部内嵌了，统一使用： vue.config.js

当然，也可以单独创建，再引用

module.exports = {
  publicPath:'./',            // 公共,基本路径
  
  // 输出文件目录，不同的环境打不同包名
  outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', 
  assetsDir: 'static',        // 默认会在目录同时生成三个静态目录：js,css,img
  lintOnSave: false,          // 关闭eslint代码检查
  filenameHashing: false,     // 生成的静态资源名, 默认加了hash, 命名.后面的为hash：chunk-2d0aecf8.71e621e9
  productionSourceMap:false,  // 生产环境下css 分离文件, sourceMap 文件
  // css: {   
  //     extract: true,      // 是否使用css分离插件 ExtractTextPlugin
  //     sourceMap: false,   // 开启 CSS source maps        
  //     modules: false,     // 启用 CSS modules for all css / pre-processor files.
  //     // css 预设器配置项
  //     loaderOptions: {
  //         sass: {
  //             data: `@import "./src/assets/hotcss/px2rem.scss";`
  //         }
  //     }        
  // },
  devServer: {
      port:8089,
      host: "localhost",   // 0.0.0.0    所有的地址均能访问
      open: true,          // 配置自动启动浏览器
      https: false, 
      hotOnly: false,
      overlay: {
          warnings: true,
          errors: true
      },
      //  配置代理,解决跨域的问题, 只有一个代理
      // proxy: null,
      // proxy: 'http://api.mc.com',
      
      // proxy: {
      //     "/api": {
      //         target: "http://api.mc.com",
      //         changeOrigin: true
      //     },
      //     "/foo": {
      //         target: ""
      //     }
      // },
      before: app => {},     // 第三方插件
  }
}