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。
相关文章
|
3月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
76 0
|
1月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
29 0
|
3月前
|
JavaScript 搜索推荐 前端开发
Vue工具和生态系统:Vue CLI是什么?它的作用是什么?
Vue工具和生态系统:Vue CLI是什么?它的作用是什么?
24 0
|
4月前
|
JavaScript
vue中如何使用animate.css库
vue中如何使用animate.css库
|
11天前
|
资源调度 前端开发 JavaScript
Tailwind CSS如何在vue项目中使用
Tailwind CSS如何在vue项目中使用
31 8
|
11天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
1月前
|
JavaScript
使用 Vue CLI 创建 Vue 项目的详细步骤
使用 Vue CLI 创建 Vue 项目的详细步骤
9 0
|
1月前
|
前端开发 JavaScript
在Vue中,如何使用CSS过渡和动画来实现淡入淡出的效果?
在Vue中,如何使用CSS过渡和动画来实现淡入淡出的效果?
26 1
|
1月前
|
前端开发 JavaScript
在Vue中,如何使用CSS过渡和动画?
在Vue中,如何使用CSS过渡和动画?
13 2
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0