vue-cli相关配置项

最新推荐文章于 2023-07-10 16:04:31 发布
最新推荐文章于 2023-07-10 16:04:31 发布
阅读量202 收藏
点赞数
分类专栏： Vue系列 架构前端&框架源码 文章标签： vue-cli3 vue-cli脚手架配置项 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/109225400
版权
本文介绍了Vue CLI 3的脚手架配置项，重点聚焦于官方文档中的CSS相关配置requireModuleExtension。
摘要由CSDN通过智能技术生成

vue-cli脚手架相关配置项

vue-cli 相关配置项官网：https://cli.vuejs.org/zh/config/#css-requiremoduleextension

module.exports = {
   
    //process.env.NOOE_ENV: 环境变量中存储的是开发环境还是生产环境,./是开发本地环境，http://www.baidu.com/是生产环境，也就是正式项目中的线上环境
   publicPath:process.env.NOOD_ENV === 'production'? 'http://www.baidu.com/':'./'
最低0.47元/天 解锁文章
公子清
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack基本使用和开发环境配置
weixin_51249285的博客
03-02 1020
webpack基本使用和开发环境配置
Invalid options in vue.config.js: “css.requireModuleExtension“ is not allowe
热门推荐
qq_46356598的博客
04-20 1万+
Invalid options in vue.config.js: "css.requireModuleExtension" is not allowe
从0到1手动配置Webpack（webpack基本配置）
qq_43955202的博客
10-02 727
1.认识webpack（grunt/gulp的区别和联系） webpack是一个现代的javascript应用的静态模块打包工具。 webpack的功能：代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布 webpack中前端模块化介绍 前端模块化方案： AMD, CMD,CommonJS, ES6. 项目通过模块化开发完成了之后，还需要处理模块间的各种依赖，并且将其进行整合打包。 webpack其中的一个核心就是让我们进行模块化开发，并且会帮助我们处理模块间的依赖关系。 而且不仅仅是
vue配置选项
最新发布
weixin_67547176的博客
07-10 286
​我们现在应该了解，在Vue框架中data的数据会被绑定到视图模板中，一旦data数据改变，视图也会随之更新，在HTML中一类特殊的元素叫做表单元素，例如<input><textarea>及<select>，它们不仅可以展示数据，还可以输入数据，如果能够将输入的数据保存下来，那便实现了所谓的双向绑定。​我们学习了Vue中提供了大量指令，但针对具体的业务场景，可能内置的这些指令还不够丰富，Vue同样提供了自定义指令，它是一个配置选项，开发者可以手动来实现具体指令。
vue-cli全面配置详解
HANGSOME123的博客
11-20 3972
创建项目 配置环境变量   通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境   在项目根目录中新建.env, .env.production, .env.analyz等文件   只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过process.env.VUE_APP_B...
vue-cli脚手架-bulid下的配置文件
08-27
Vue-cli脚手架bulid下的配置文件 Vue-cli脚手架bulid下的配置文件是Vue.js开发过程中的一部分，主要用于创建和配置Vue.js项目。通过学习和掌握这些配置文件，可以帮助开发者更好地理解Vue.js项目的结构和工作原理，...
vue-cli 为项目设置别名的方法
12-13
// 在 webpack.base.config.js中的 resolve 配置项，在其 alias 中增加别名 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } } 3.vue-...
详解vue-cli中配置sass
08-30
Vue CLI 中配置 Sass 在本文中，我们将详细介绍如何在 Vue CLI 中配置 Sass，这是前端开发中非常重要的一步。Sass 是一种基于 CSS 的扩展语言，它提供了许多有用的功能，可以帮助我们更好地编写 CSS 代码。 一、...
vue-cli3 热更新配置操作
10-14
// css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. modules: false, }, }; ``` 当完成上述配置后，通过运行 `npm run serve` 命令重启项目，你应该能够体验到...
vue-cli中的webpack配置详解
08-29
在这篇文章中，我们将详细介绍Vue-cli中的Webpack配置项，帮助开发者更好地理解和使用Vue-cli。 Webpack配置 在Vue-cli项目中，Webpack配置文件位于build目录下，主要包括三个文件：webpack.base.conf.js、webpack...
浅谈Webpack下多环境配置的思路
08-27
主要介绍了浅谈Webpack下多环境配置的思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue-Cli 配置项
海胆的博客
05-05 1809
@vue/cli @vue/cli-service @vue/cli-plugin-xx vue-cli-plugin-xx
webpack 环境配置和基本用法
qianduan2001_5的博客
05-25 100
(4), 如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli。(4)在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。把a.js , b.js, 和 c.js中的代码打包到一起,写入x.js中。
08.ElementUI 2.X 源码学习:源码剖析之工程化(三)
qq_38082146的博客
06-08 261
本系列文章主要通过解析element项目源码，从结构、功能、源码方面逐一解析，学习其模块化、组件化、规范化、自动化等多维度优秀实践。主要内容包含项目结构、npm script、项目构建、文档解析、打包配置、发布部署等。 本文是第三篇,介绍项目的打包配置功能。 0x.01 ???? 打包配置 ???? 项目中webpack版本为4.X,文中涉及语法、功能与最新版本5.X相比存在变化。 ???? commonjs vs commonjs2 接下来配置libraryTarget的选项中可以看到'co
vue-cli配置
qq_51329780的博客
12-04 623
vue-cli配置
Vue CLI配置项总结（8）
Mybells
09-17 436
vue.config.js const webpack = require("webpack"); module.exports = { //baseUrl,从 Vue CLI 3.3 起已弃用，请使用publicPath。 // 项目部署的基础路径 // 我们默认假设你的应用将会部署在域名的根部， // 比如 https://www.my-app.com/ // 如果你...
webpack的 拆分配置 和 合并配置
weixin_44684357的博客
04-19 529
mode表示以什么模式进行打包； 使用development模式，打包后的代码可阅读，没被压缩； 使用production模式，代码被压缩； const path = require('path'); module.exports = { mode:'development', // production 生产环境 entry:{ app: './src/main.js', list: './src/main.js' }, output:{ path.resolve(__dirname,
4. webpack 生产环境的基本配置
小丕的博客
03-13 1544
第 4 章：webpack 生产环境的基本配置 开发环境： 源代码 -> webpack+自动化 -> bundle 开发环境中：比如 1. css -> loader -> js ； css经过loader加载会加入到js代码中；会使js代码体积变大；由于先加载js后再插入style标签，会存在闪现现象； .... 生产环境中： 以下操作放在开发环境的话会拖慢开发环境的构建速度，即打包速度较慢，影响开发效率； 4.1 提取 css 成单独文件 1. 下载安装包 2
vue语法（model层）vue的配置项
weixin_59023663的博客
08-07 658
样式操作 操作样式，就是属性绑定，只不过绑定的属性是class和style，vue在class和style属性上做了加强，给样式属性赋的值还可以是对象，数组。 绑定姿势（格式） <div v-bind:class="数据|属性|变量|表达式"></div> <div v-bind:style="数据|属性|变量|表达式"></div> 属性值的类型支持 字符串/对象 / 数组 <div :class="{active:true,t1:false
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、付费专栏及课程。

余额充值