位置: IT常识 - 正文

Vue vue.config.js 的详解与配置

编辑:rootadmin
Vue vue.config.js 的详解与配置 Vue vue.config.js 的详解与配置

推荐整理分享Vue vue.config.js 的详解与配置,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

1. 为什么要配置 vue.config.js

由于 vue-cli 3 也学习了 rollup 的零配置思路,所以项目初始化后,没有了以前熟悉的 build 目录,也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

但是有些内容需要进行相关的配置,所以我们还是要创建一个vue.config.js来进行数据修改,比如代理啥的

2.里面的配置详解

vue.config.js 文件是一个可选的配置文件,存放在根目录中,要是有这个文件,在@vue/cli-service 启动的时候会自动加载,所以我们在修改里面的内容之后,要进行项目重新加载。 同时你也可以在package.json中的vue字段(这里有时间在研究) 配置选项: 首先页面里面出现这个 没有就自己写 每次在用的时候都是直接从网上找一个复制下来,用到哪个地方修改哪里,但是一直不知道具体是怎么操作,怎么使用,毕竟这关系到项目的架构,还是直接明白所有的用法靠谱,最后会写一个复制用的,但是还是顺着看完。

首先是 publicPath{Type(类型): stringDefault(默认): '/'} 1.项目部署的基础路径 2.我们默认假设你的应用将会部署在域名的根部, 3.比如 https://www.my-app.com/ 4.如果你的应用时部署在一个子路径下,那么你需要在这里 指定子路径。比如,如果你的应用部署在 https://www.foobar.com/my-app/ 那么将这个值改为 `/my-app/`拓展:把开发服务器假设在根路径,可以直接使用一个判断 publicPath :process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'outputDir (基本不动,打包目录不都是用那个吗){Type(类型): stringDefault(默认): 'dist'}1.将构建好的文件输出到哪里(或者说将编译的文件),当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。assetsDir (基本上都是默认){Type(类型): stringDefault(默认): ''}1.放置生成的静态资源 (js、css、img、fonts) 的目录。注(我没懂):从生成的资源覆写 filename 或 chunkFilename 时,assetsDir 会被忽略。indexPath (没动过){Type(类型): stringDefault(默认): 'index.html'}1.指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。filenameHashing (默认就行){Type(类型): booleanDefault(默认): true}1(摘录).默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而,这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈。注意:这个是比较重要的有延伸,vue感觉上侧重于单页面应用,意思就是只有一个页面,里面的操作都是通过组件的切换来完成的但是你也可以使用多页面

单页面应用(spa)

Vue vue.config.js 的详解与配置

概念:只有一个html页面,所有跳转方式都是通过组件切换完成的。 优点:页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。 缺点:首屏加载较慢,加载整个项目中使用的css、js,SEO优化不好。

多页面应用(mpa)

概念:整个项目有多个html,所有跳转方式都是页面之间相互跳转的。 优点:首屏加载较快,只加载本页所使用的的css、js,SEO优化较好。 缺点:页面跳转较慢。

vue 如何实现多页面应用 https://www.jianshu.com/p/eceb2ac9df90 vue中如何配置多页面配置 https://www.jianshu.com/p/52c4913e0bf4

pages (我相信将来我会用到的){Type(类型): ObjectDefault(默认): undefined}1.在 multi-page(多页)模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。 举例子: // 用于多页配置,默认是 undefined pages: { index: { // 入口文件 entry: 'src/main.js',  /*这个是根入口文件*/ // 模板文件 template: 'public/index.html', // 输出文件 filename: 'index.html', // 页面title // 当使用 title 选项时, // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page' }, // 简写格式 // 模板文件默认是 `public/subpage.html` // 如果不存在,就是 `public/index.html`. // 输出文件默认是 `subpage.html`. subpage: 'src/main.js'    /*注意这个是*/ },lintOnSave (默认){Type(类型): boolean | 'error'Default(默认): true}1. 是否在保存的时候使用 `eslint-loader` 进行检查。 2. 有效的值:`ture` | `false` | `"error"` 当设置为 `"error"` 时,检查出的错误会触发编译失败。3. 是否在保存的时候使用 `eslint-loader` 进行检查。4. 有效的值:`ture` | `false` | `"error"`5. 当设置为 `"error"` 时,检查出的错误会触发编译失败(默认 我没用过){Type(类型): booleanDefault(默认): false}1. 是否使用带有浏览器内编译器的完整构建版本2. 设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。transpileDependencies (没用过){Type(类型): Array<string | RegExp>Default(默认): []}1. 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来3. babel-loader 默认会跳过 node_modules 依赖。4. 通过这个选项可以显式转译一个依赖。productionSourceMap (就只是知道这么个意思){Type(类型): booleanDefault(默认): true}1. 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。crossorigin (不知道) {Type(类型): stringDefault(默认): undefined}1.在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。

Webpack相关配置

configureWebpackType:Object | Function1.如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。 2.如果这个值是一个函数,则会接收被解析的配置作为参数。 该函数及可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。 chainWebpackType: Function1.是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

Css相关配置

// CSS 相关选项 css: { extract: true, Type: boolean | Object 1. 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中) 2. 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象 sourceMap: false, {Type(类型): booleanDefault(默认): false}1. 是否开启 CSS source map? 设置为 true 之后可能会影响构建的性能。 loaderOptions: {}, {Type(类型): ObjectDefault(默认): {}}1. 为预处理器的 loader 传递自定义选项。比如传递给 2. sass-loader 时,使用 `{ sass: { ... } }`。 modules: false {Type(类型): booleanDefault(默认): false} 1.为所有的 CSS 及其预处理文件开启 CSS Modules。 2. 这个选项不会影响 `*.vue` 文件。 }, // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader` // 在多核机器下会默认开启。 parallel: require('os').cpus().length > 1, // PWA 插件的选项。 // 查阅 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-pwa pwa: {},

代理配置

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。我们前边的 axios 就说了 // 配置 webpack-dev-server 行为。 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: { '/api': { target: 'http://localhost:8880', changeOrigin: true, secure: false, // ws: true, pathRewrite: { '^/api': '/static/mock' // 请求数据路径别名,这里是注意将static/mock放入public文件夹 } } }, before: app => {} },

简洁版 很多都是默认的 不需要修改

module.exports = { // publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/', //基本路径 publicPath: './',//默认的'/'是绝对路径,如果不确定在根路径,改成相对路径'./' // 输出文件目录 outputDir: 'dist', assetsDir: 'static', indexPath: 'index.html', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, }, // webpack-dev-server 相关配置 devServer: { open: false,//open 在devServer启动且第一次构建完成时,自动用我们的系统的默认浏览器去打开要开发的网页 host: '0.0.0.0',//默认是 localhost。如果你希望服务器外部可访问,指定如下 host: '0.0.0.0',设置之后之后可以访问ip地址 port: 8080, hot: true,//hot配置是否启用模块的热替换功能,devServer的默认行为是在发现源代码被变更后,通过自动刷新整个页面来做到事实预览,开启hot后,将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。 https: false, hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下,前者会自动刷新页面,后者不会刷新页面,而是在控制台输出热更新失败 proxy: { '/': { target: 'http://xxxx:8080', //目标接口域名 secure: false, //false为http访问,true为https访问 changeOrigin: true, //是否跨域 pathRewrite: { '^/': '/' //重写接口 } } }, // 设置代理 before: app => { } }, // 第三方插件配置 pluginOptions: { // ... }};总结 (重要):

1 vue在工程化开发的时候依赖于 webpack ,而webpack是将所有的资源整合到一块后形成一个html文件 一堆 js文件, 如果将vue实现多页面应用,就需要对他的依赖进行重新配置,也就是修改webpack的配置文件. vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。

2 webpack 有个特性,基本的功能都是可以用配置去实现的,所以就造成一个特点“很容易忘记它”,所以就很有必要记录一下 简述一下

webpack 分为Entry:入口Output: 出口Module 模块Plugin 插件DevServer 服务器配置
本文链接地址:https://www.jiuchutong.com/zhishi/289690.html 转载请保留说明!

上一篇:【Vite】使用报错合集(vite报错)

下一篇:「ChatGPT」十分钟学会如何在本地调用API_KEY(最新版 | 附源码)(十分=1)

  • 怎样让自己和网站快速爆红赚流量(怎样让自己网卡)

    怎样让自己和网站快速爆红赚流量(怎样让自己网卡)

  • 抖音访客记录怎么看(抖音访客记录怎么没有显示时间了)

    抖音访客记录怎么看(抖音访客记录怎么没有显示时间了)

  • 小米盒子怎么投屏(小米盒子怎么投屏安装软件)

    小米盒子怎么投屏(小米盒子怎么投屏安装软件)

  • 微信群退群别人能看得到吗(微信怎么看我的群聊)

    微信群退群别人能看得到吗(微信怎么看我的群聊)

  • 微信群如何回复某一个人的消息(微信群如何回复单条信息)

    微信群如何回复某一个人的消息(微信群如何回复单条信息)

  • 声卡的主要功能是啥(声卡的主要功能是什么选择题)

    声卡的主要功能是啥(声卡的主要功能是什么选择题)

  • 华为mate30与华为p40的区别(华为mate30与华为p40)

    华为mate30与华为p40的区别(华为mate30与华为p40)

  • 微信怎么发狗头表情(微信发狗头是什么意思)

    微信怎么发狗头表情(微信发狗头是什么意思)

  • ipad怎么使用无线网卡(ipad怎么使用无线键盘)

    ipad怎么使用无线网卡(ipad怎么使用无线键盘)

  • 为什么wlan连接上不能用(为什么wlan连接上不能用怎么办)

    为什么wlan连接上不能用(为什么wlan连接上不能用怎么办)

  • 手机微信怎么看黑名单在哪里(手机微信怎么看电脑有没有登录)

    手机微信怎么看黑名单在哪里(手机微信怎么看电脑有没有登录)

  • 华为m6支持内存扩展吗(华为m6支持多大内存卡)

    华为m6支持内存扩展吗(华为m6支持多大内存卡)

  • 快手作品里已戳怎么取消(快手上已戳别人没事吧)

    快手作品里已戳怎么取消(快手上已戳别人没事吧)

  • 计算机三级有用吗(计算机三级能干嘛)

    计算机三级有用吗(计算机三级能干嘛)

  • 苹果11显示屏分辨率(苹果显示屏分离触摸与液晶屏)

    苹果11显示屏分辨率(苹果显示屏分离触摸与液晶屏)

  • now直播怎么注销账号(now直播怎么取消授权)

    now直播怎么注销账号(now直播怎么取消授权)

  • 快手闪退怎么解决(快手闪退怎么回事?)

    快手闪退怎么解决(快手闪退怎么回事?)

  • 微信红包账单删除了怎么恢复(微信红包账单删除要验证怎么办)

    微信红包账单删除了怎么恢复(微信红包账单删除要验证怎么办)

  • 联想7206用什么样的粉盒(联想7206用什么型号碳粉)

    联想7206用什么样的粉盒(联想7206用什么型号碳粉)

  • 怎么设置电脑锁屏时间(怎么设置电脑锁屏后要密码唤醒)

    怎么设置电脑锁屏时间(怎么设置电脑锁屏后要密码唤醒)

  • 如何在Win11中添加无线打印机?Win11中添加无线打印机操作方法(windows 11怎么用)

    如何在Win11中添加无线打印机?Win11中添加无线打印机操作方法(windows 11怎么用)

  • 鸿蒙2.0正式版升级再增新机型!目前已有32款,看看你的机型在么(鸿蒙2.0正式版升级)

    鸿蒙2.0正式版升级再增新机型!目前已有32款,看看你的机型在么(鸿蒙2.0正式版升级)

  • 电子税务局财务报表怎么更正申报
  • 增值税金税盘开票的结论
  • 什么是税目税基税率,简答题
  • 工资个人所得税怎么算
  • 增值税是否计入存货成本
  • 为什么缴纳税
  • 购税盘需要什么东西
  • 技术合同免税备案流程2022年
  • 卷烟消费税纳税环节有几个
  • 如何进行银行存款的实质性程序
  • 房贷利息抵个税细则 两套房
  • 工程材料增值税专用发票税率
  • 如何理解纳税人资格
  • 2021年个人开发票税率
  • 一个季度又叫什么
  • 优化技巧
  • 销售退货成本如何计算
  • 个税附加扣除如何填写合适
  • 财务会计怎么学好
  • 以前年度多做了收入怎样调账
  • 出租房产如何交土地使用税
  • 以前年度记账错误
  • 企业筹建期发生的广告宣传费怎么抵减所得税
  • 委托个人加工应税消费品纳税地点
  • linux wget命令详解
  • 网页浏览器字体颜色怎么改
  • 土地合并需要什么资料
  • 增值税补开发票
  • win10怎么看已安装的驱动
  • Win10 KB5005033 给某些用户带来了新问题的解决方法
  • 收到银行存款利息会计分录
  • 完美替身好看吗
  • 显示国家税务总局东莞分局打来电话是诈骗还是正规电话
  • 对公账户的银行卡号是几位数
  • 谷歌浏览器跨域解决方案
  • 建筑业异地预缴增值税
  • php如何实现重载
  • php的urlencode
  • fsck命令详解
  • 低值易耗品费用计入什么科目
  • 会计中财务费用为负
  • 如何解决面颊毛孔粗大
  • 公司收到股权转让款需要交什么税种
  • 工费经费计入哪里
  • 个体户电子申报税流程
  • 企业短期借款的会计分录
  • 什么企业不用交残保金
  • 印花税购销合同改为买卖合同
  • 质量扣款可以放到费用吗
  • Windows下Postgresql数据库的下载与配置方法
  • MySQL默认字符集修改
  • 其他债权投资减值为什么不影响所有者权益
  • 待认证进项税额认证以后怎么做分录
  • 酒店客房收入会计分录
  • 丢失增值税专用发票的征管政策
  • 印花税如何计提缴纳
  • 土地出让金进项税怎么算
  • 日常生活中各种形式的能量的转化
  • 预付费用款项现金流量怎么算
  • 有发票还要填写领款单吗
  • 主营业务成本包括哪些
  • 代开专票作废税已经交了如何做分录?
  • 企业所得税季报营业成本包括哪些
  • 会计凭证,报告怎么做
  • mysql数据库输入汉字是问号
  • 安装软件提示windows 无法访问指定设备,路径或文件
  • ubuntu 15.04系统怎么安装qq?
  • created directory cfg怎么办
  • win7系统怎么设置屏幕常亮
  • windows8主题桌面
  • linux入门学习
  • unity3d特效教程
  • javascript中array数组对象的含义及常用方法
  • jquery defaultvalue
  • 基于javascript的毕业设计选题
  • 福建税务局网上办税
  • 江苏联通客服电话人工服务号码
  • 福建电子税务局登录入口
  • 税局签三方
  • 争议问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设