vue-cli脚手架配置项 之 css.extract 可能需要注意的地方, 你的项目生产环境下出问题了吗?

最新推荐文章于 2024-05-11 09:47:06 发布
最新推荐文章于 2024-05-11 09:47:06 发布
阅读量825 收藏
点赞数 1
文章标签： vue.js javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43546457/article/details/131402465
版权

1.文档

Default: 生产环境下是 true，开发环境下是 false

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。

同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。

当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。

提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true
在所有情况下都强制提取。

  1. 动态注入到 JavaScript 中的 inline 代码是指:

具体来说，Webpack 会将组件中的样式代码转换成 JavaScript 对象，然后在组件的 JavaScript 代码中创建一个
style 标签，将这个对象转换成 CSS 样式，并将其插入到这个 style 标签中。最后，Webpack 会将这个 style
标签插入到 HTML 页面中，以动态注入样式

  1. 区别
  1. css.extract = true 则提取css成为外部文件, 而不是inline方式–>动态JavaScript注入, 这样的话网络就需要请求额外的css文件, 但是JavaScript代码会变少
  2. css.extract = false 不需要请求额外的css文件, 但是JavaScript代码会变多
  1. 注意点
  • 从工程构建的角度, 这是两种不同的css处理模式, vue-cli默认值开发环境和生产环境不一致, 所以不能保证开发环境, 生产环境完全一致, 如果出现css问题可能需要在配置文件手动指定css.extract的值
飞衡、如日之升
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
extract-css-core:从给定的网址中提取所有CSS，同时渲染服务器端和客户端
05-09
提取CSS核心 从给定的URL中提取所有CSS，同时呈现服务器端和客户端。 用法 const extractCss = require ( 'extract-css-core' ) const css = await extractCss ( 'https://www.projectwallace.com' ) //=> html{font-size:100%} etc. 或者，如果您需要更多详细信息： const entries = await extractCss ( 'https://www.projectwallace.com' , { origins : 'include' } ) // entries will look something like this [ { href : 'https://www.projectwallace.com' , type
Vue CLI4.0 webpack配置属性——css.extract
Jay的博客
04-29 7042
css.extract Type: boolean | Object Default: 生产环境下是 true，开发环境下是 false 官方文档说明 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shado...
动态提取CSS利器：mini-css-extract-plugin
最新发布
gitblog_00041的博客
05-11 784
动态提取CSS利器：mini-css-extract-plugin 项目地址:https://gitcode.com/webpack-contrib/mini-css-extract-plugin 在前端开发中，管理和优化CSS资源的加载是提升用户体验的关键步骤。如果你正在使用Webpack 5构建项目，那么【mini-css-extract-plugin】值得你关注。这个小巧而强大的插件能够将你...
《十三》对打包后的 CSS 文件的分离
花铛
10-15 86
MiniCssExtractPlugin：是一个后处理插件，可以在 Webpack 打包之后，将 CSS 样式从 bundle 中提取出来生成独立的 CSS 文件，并将其引入到 HTML 中。
小白webpack教程！提取css、兼容、压缩
猛猛的博客
07-27 278
  接上一篇文章将所需要的文件打包，但是输出的css都是嵌在html文件的style标签中，而我们平常看到的项目都是能够将文件分类，接下来的内容便是将css提取成单独文件、做浏览器兼容以及压缩的操作。 一、提取css成单独文件： 1）需要插件：mini-css-extract-plugin 安装引入const miniCssExtractPlugin= require("mini-css-extract-plugin"); mini-css-extract-plugin 2版本以上必须使用web
[Vue CLI 3] 配置解析之 css.extract
weixin_33806300的博客
09-13 729
大家还记得我们在老版本中，对于线上环境配置中会把所有的 css 多打成一个文件： 核心是使用了插件 extract-text-webpack-plugin，方式如下： 第一步都是加载插件 const ExtractTextPlugin = require('extract-text-webpack-plugin') 这个插件的描述如下： ...
详解Vue CLI3配置解析之css.extract
12-11
当 `css.extract` 设置为 `true` 或在生产环境中，默认情况下，Vue CLI3 会使用 `mini-css-extract-plugin` 来实现相同的功能。这个新插件同样将 CSS 提取到单独的文件，但提供了更好的性能和兼容性。 在文件 `@vue...
vue-cli脚手架build目录下utils.js工具配置文件详解
12-12
此文章用来解释vue-cli脚手架build目录中的utils.js配置文件 1.此配置文件是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader 2.关于注释 •当涉及到较复杂的解释我将通过标识的方式...
vue-cli脚手架config目录下index.js配置文件的方法
10-18
在 Vue CLI 项目中，`config` 目录下的 `index.js` 文件是项目的配置中心，它允许开发者自定义项目在开发和生产环境中的各种设置。本文将详细介绍 `index.js` 配置文件及其各个选项的作用。 1. **环境参数定义**： ...
webpack抽取css
榴莲不好吃的专栏
11-21 907
webpack4之前的版本使用ExtractTextPlugin方法提取css, 安装cnpm install extract-text-webpack-plugin -D webpack4和webpack4.x上使用ExtractTextPlugin的话,会报下面的错误DeprecationWarning: Tapable.plugin is deprecated. Use new API o...
webpack+vue实践
王永存
06-17 379
前言 2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深刻的认识下我们经常打交道的webpack 本文共分为三个部分带你领略webpack的魅力。如有不足之处，恳请斧正 1. 入门(一起来用这些小例子让你熟悉webpack的配置) 1.1 初始化项目 新建一个目录，
Vue CLI4.0 webpack配置属性——css.sourceMap
黄彪博客
02-13 788
Vue CLI4.0 webpack配置属性——css.sourceMap
vue.config.js的优化配置
weixin_44991965的博客
09-11 1269
“关注 前端开发社区 ，回复“ 1” 即可加入 前端技术交流群，回复 “ 2” 即可免费领取500G前端干货！ 最近优化了一个vue cli3.0项目，项目从打包体积2.5M，优化到272k, 速度提高了约2/3。下面将优化方法写下： 需要新建文件’vue.config.js’，(这文件名是固定这么写的)，与package.json在同一级目录下。 BundleAnalyzer 作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前 注释掉 安装
webpack：css代码提取插件extract-text-webpack-plugin和mini-css-extract-plugin
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
09-25 856
webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。webpack 4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件（从css文件中提取css代码到单独的文件中，对css代码进行代码压缩等）。替代extract-text-webpack-plugin 进行资源提取。提取静态资源 css 等。
webpack不同环境下使用CSS分离插件mini-css-extract-plugin
黎小小的博客
10-09 2616
不同环境下的打包，如果出现图片显示不了时（特别是css中的图片），请检查publicPath的配置。会开启tree-shaking和js代码压缩，但配置会使默认的压缩功能失效。所以，指定css压缩插件的同时，务必指定js的压缩插件。插件，结合配置，可以把css代码打包到单独的css文件，且可以设置存放路径（通过设置插件的filename和生产环境下不能使用devtool:"inline-source-map"，而用devtool:"source-map"
Vue的性能优化
09-21 368
首屏加载过慢优化： 分析工具贴一波： vuecli 2.x自带了分析工具，只要运行 npm run build --report 如果是 vuecli 3的话，先安装插件 cnpm intall webpack-bundle-analyzer –save-dev 然后在 vue.config.js中对 webpack进行配置 再运行 npm run build --report 会在浏览器打开一个项目打包的情况图，便于直观地比较各个 bundle文件的大小 1、路由的问题，简单带过 import Show
vue.config.js 配置介绍
weixin_45683187的博客
11-24 570
let path = require('path') function resolve (dir) { 　　return path.join(__dirname, dir) } module.exports = { publicPath:'./', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致 outputDir:'dist', //构建时的输出目录 assetsDir:'assets', //放置生成的静态资源 (js、
vue-cli5配置vue.config.js
06-28
### 回答1： vue-cli5中的vue.config.js是用来配置Vue项目的配置文件。它可以用来配置webpack的一些选项，如入口文件、输出文件、模块解析、插件等等。在vue.config.js中，我们可以设置一些常用的配置项，如publicPath、outputDir、devServer等等，来满足我们的需求。同时，我们也可以通过vue.config.js来配置一些自定义的loader和plugin，来满足我们的特殊需求。总之，vue.config.js是一个非常重要的配置文件，它可以帮助我们更好地定制化我们的Vue项目。 ### 回答2： Vue CLI5 为我们提供了一种简单易用的方式来配置我们的Vue.js应用程序。Vue.js是一款非常受欢迎的JavaScript框架，Vue CLI5帮助我们快速构建Vue.js应用程序并提供了一个灵活的配置系统，其中包括一个名为vue.config.js的配置文件。 vue.config.js是一个可选的配置文件，它允许我们自定义Vue应用程序的行为。在该文件中，我们可以定义不同的选项来控制构建和开发过程的不同方面，如Webpack配置、启用CSS预处理器、配置代理服务器，以及添加或修改Webpack的loader和插件。 下面是一些常见的选项可以在vue.config.js中进行配置： - publicPath: 配置公共路径，用于指定应用程序在生产环境下的根路径。 - outputDir: 配置输出目录，用于指定生成的应用程序的输出目录。 - assetsDir: 配置静态资源目录，用于指定放置生成的静态资源的目录相对于outputDir的路径。 - configureWebpack: 配置Webpack对象，用于覆盖默认的Webpack配置。 - chainWebpack: 配置Webpack链，用于在默认Webpack配置下修改Webpack选项。 - devServer: 配置开发服务器对象，用于启用开发服务器并代理API请求到API服务器。 - css: 配置CSS选项，例如启用CSS预处理器，设置CSS loader选项。 下面是一个简单的vue.config.js示例： ```javascript module.exports = { publicPath: '/my-app/', outputDir: 'dist', assetsDir: 'static', configureWebpack: { plugins: [ new MyPlugin() ] }, devServer: { proxy: { '/api': { target: 'http://localhost:3000', ws: true, changeOrigin: true } } }, css: { loaderOptions: { css: { // options here } } } } ``` 这是Vue CLI5应用程序的默认配置，通过在vue.config.js中添加自定义选项，我们可以在不触碰默认选项的情况下扩展和定制应用程序的功能。 总之，Vue CLI5帮助我们加速Vue.js应用程序的开发，并提供了一个非常有用的配置文件vue.config.js，让我们可以轻松地自定义和定制Vue应用程序的各个方面。 ### 回答3： vue.config.js是Vue的配置文件，可以用于配置Webpack、Babel、ESLint、反向代理等。vue-cli5（Vue CLI的5.x版本）是Vue CLI的下一代版本，为Vue项目的创建和调试提供了更加便利的方法。 下面介绍如何使用vue.config.js进行Vue项目的配置。 1.创建vue.config.js文件 在项目的根目录中创建vue.config.js文件，并按照以下格式进行基本配置： ``` module.exports = { // 基本路径 publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', // 输出路径 outputDir: 'dist', // 配置devServer devServer: { port: 8888, // 端口号 proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 2.配置Webpack 可以使用chainWebpack或configureWebpack来配置Webpack。chainWebpack可以修改Webpack的配置，而configureWebpack可以覆盖Webpack的配置。 ``` module.exports = { chainWebpack: config => { // 移除prefetch插件 config.plugins.delete('prefetch') }, configureWebpack: { // 修改输出文件名 output: { filename: '[name].[hash:8].js', chunkFilename: '[name].[hash:8].js' } } } ``` 3.配置Babel 通过babel配置可以添加新的babel插件和babel预设。 ``` module.exports = { transpileDependencies: [ 'vuetify' ], babel: { plugins: ['@babel/plugin-proposal-optional-chaining'], presets: [ '@babel/preset-env' ] } } ``` 4.配置ESLint 可以使用lintOnSave配置项来开启/关闭ESLint。也可以修改ESLint的规则。 ``` module.exports = { lintOnSave: process.env.NODE_ENV !== 'production', rules: { 'vue/no-unused-components': 'off' } } ``` 5.反向代理 可以使用devServer.proxy来配置反向代理，解决前端接口跨域的问题。 ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 以上是关于vue-cli5配置vue.config.js的介绍。Vue CLI是Vue项目开发的重要工具，其强大的开发环境能够大幅度提高开发效率。透过配置vue.config.js，我们可以更好地调整Vue的项目配置以满足项目需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值