位置: 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)

  • 一般纳税人公司抵扣
  • 劳务报酬和工资薪金哪个税率高
  • 往来票据如何开具
  • 土地使用权摊销计入在建工程
  • 一般纳税人不开票收入怎么填增值税申报表
  • 融资租入的办公楼属于固定资产吗
  • 销售额负数 如何填报报表
  • 事业单位结转结余科目
  • 少记财务费用如何记账
  • 破坏公司财产员工怎么处理
  • 百望税控盘电子发票
  • 差旅补贴需要缴纳个税吗
  • 一般纳税人出租不动产增值税税率
  • 城建税及教育费附加税怎么算
  • 月末增值税进项和销项怎么结转
  • 劳务挂靠需要开票吗
  • 多付几分钱怎么做账
  • 工商年报社保需要多少钱
  • 长时间不操作电动座椅会发生什么
  • 腾讯电脑管家网络修复
  • 研发支出怎么做账
  • 支付电费的税费怎么算
  • win11怎么压缩图片画质
  • win10 20h1 bug
  • 单位中秋节福利发放物品
  • PHP:Memcached::prepend()的用法_Memcached类
  • hbuilderx怎么运行代码
  • 结转损益类收入科目的余额会计分录
  • php定时执行代码
  • 一个php请求的执行过程
  • 煤炭企业的会计科目
  • 个人销售废旧物资如何开票
  • 专项基金设立
  • phpstudy配置
  • el-switch右对齐
  • python优化工具箱
  • phpcms模块
  • 销售折让的会计科目
  • python读取text
  • 差旅费报销可以直接从公账转到个人账户吗
  • python多进程间通信
  • sql死锁的原因及解决方法
  • 环保税的纳税义务人是施工方还是建设方安徽
  • 办公桌椅入固定资产计提折旧几年
  • 小企业会计准则和一般企业会计准则的区别
  • 个税系统经营所得人员怎样添加
  • 债务豁免涉税
  • 水利基金的计税税率6
  • 会计年度对账
  • 没有发票的运输费用怎么入账
  • 没有认证抵扣的发票如何冲红
  • 事业单位收到发票怎么处理
  • 注册资本认缴与实缴有什么区别
  • 发放股票股利如何影响计算基本每股收益
  • 成品油发票如何下载库存
  • 预存返利骗局
  • 赠送电影票文案
  • 企业在期间新购进的设备、器具
  • 商业承兑汇票提示付款流程
  • 投资款没有进入公司账户算投资款吗
  • 装订好的凭证可以拿掉一页吗
  • centos vsftpd配置
  • acs_log是什么文件
  • linux使用pip
  • reg注册表格式文件
  • win8安装步骤
  • cocos2d原理
  • ajax请求数据放到页面
  • jquery异步获取数据
  • jquerychange事件
  • bash脚本语法
  • unity 角色
  • js页面点击怎么随机生成图片
  • python中的stringvar
  • 国家税务总局是正部级还是副部级
  • 医保12333查询系统
  • 公司被税务查账对不上
  • 山东水利建设基金减免政策
  • 湖南什么时候实行电子驾驶证
  • 襄城是现在的哪个城市
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设