vue/cli中css.sourceMap-open-inline-host-port-https-openPage-compress -devServer.proxy的简单介绍

Vue/cli4.0 配置属性——css.sourceMap

设置是否开启 css 的 sourse map功能。
css 的 sourse map作用类似与 js 的 sourse map。
注意：开启可能会影响构建性能。

module.exports = {
  // css相关配置
  css: {
    extract: false, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps; 默认值是false
  }
}

sourceMap: true。Type: boolean, Default: false。
是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
设置为true后可以清楚的知道，你在控制的css你在项目中的哪一行。


css.extract 
Type: boolean | Object
Default: 生产环境下是 true，开发环境下是 false
是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。
当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。
提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。
然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。

devServer中open-inline-host-port-https的简单使用

module.exports = {
  // webpack-dev-server 相关配置
  devServer: {
    open: true, //服务启动后，默认打开浏览器
    inline: true, //作用用于设置保存代码时,是否自动刷新页面。它的默认值是true
    host: '0.0.0.0', // 允许外部ip访问
    port: 8080, // 启动的端口是8080端口 
    https: true, // 启用https
  }
}

devServer.hot

Type: boolean | string
Default: true
hot作用：用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）。
module.exports = {
  devServer: {
    hot: true
  }
}

devServer.openPage

Type: string
作用: 指定deserver 编译完成后自动打开的页面

module.exports = {
  devServer: {
    open: true,
    openPage: '#/study'
  }
};
注意：需要配合 open来使用。
如果Vue router 为 hash mode。
应在url前面补上#。如：openPage: '#/study'
如果是历史模式,设置为下
openPage: '/study'

需要注意的是：在开发环境会自动打开/study这个页面。
但是在生产环境并不会的哈
需要注意一下

devServer.https

Type: boolean | object
Default: false
作用：用于设置是否启用https

module.exports = {
  devServer: {
    https: true
  }
}

devServer.compress 可以进一步的深入哈

Type: boolean
作用：对devServer 所有服务启用 gzip 压缩。

module.exports = {
  devServer: {
    compress: true
  }
};

注:gzip压缩用于减少服务器向前端传输的数据量，提高浏览的速度。

devServer.headers

Type: object
作用: 在所有响应中添加首部内容

module.exports = {
  devServer: {
    headers: {
      'X-Custom-Foo': 'bar'
    }
  }
};

需要注意的是，在开发环境中是会添加上的，但是在生产环境并不会

开发环境

生产环境

devServer.proxy

Type: object [object, function]
作用: 设置API访问代理。如果你有单独的后端开发服务器 API，
并且希望在同域名下发送 API 请求，那么代理某些 URL 会很有用。
module.exports = {
  proxy: {
        '/api': {
        target: 'http://127.0.0.10:3000'
     }
  }
};
例如 /api/list 现在会被代理到请求 http://127.0.0.10:3000/api/list,
例如 /api/user 现在会被代理到请求 http://127.0.0.10:3000/api/user
注意：在Vue/cli4.0 使用devServer.proxy 一定要设置 target。

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：晚来南风晚相识

如果文中有什么错误，欢迎指出。以免更多的人被误导。