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

简介: 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'
    }
  }
};
需要注意的是,在开发环境中是会添加上的,但是在生产环境并不会


开发环境


1425695-20220306115233241-940693558.png

生产环境


1425695-20220306115436479-1213322313.png


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。
相关文章
|
7月前
|
JSON 前端开发 JavaScript
CSS模块postcss-modules,在jsx中实现vue里的scoped
CSS模块postcss-modules,在jsx中实现vue里的scoped
|
7月前
|
前端开发 JavaScript
vue 动态改变css样式
vue 动态改变css样式
137 0
|
2月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
36 3
|
2月前
|
JavaScript 前端开发
|
2月前
|
JavaScript
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
42 2
|
3月前
|
JavaScript
Vue Cli 脚手架安装
本文介绍了如何使用npm和cnpm淘宝镜像加速来安装Vue CLI脚手架工具,并验证安装成功。接着,通过Vue CLI创建新项目,并启动项目服务。
Vue Cli 脚手架安装
|
3月前
|
JavaScript 前端开发
react Or vue中引入animate.css
本文介绍了如何在React或Vue项目中引入animate.css库来使用动画效果,包括通过npm安装或在线链接引入,并展示了如何在React组件和Vue路由过渡中使用动画类。
71 0
|
4月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
72 0
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
|
6月前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
132 7
使用 Vue CLI 脚手架生成 Vue 项目
|
5月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
206 2