vue前端项目配置

目录

背景:

0.参考文档

0.1介绍 | Vue CLI (vuejs.org)(官方文档)

0.2【vue-cli5 bug】npm run build自动编译两次??? - 掘金 (juejin.cn)

0.3vendor.js文本过大

0.4vue性能优化

0.5启动项目一直是生产环境

0.6process.env(推荐阅读)

0.7module.exports和export详解 - 简书 (jianshu.com)

1.变量和用法解释

1.1process.env

1.2public Path

1.3moudle.export

1.4resolve函数

2..env环境配置

3.vue.config.js文件

4..browserslistrc配置文件

5.发现的问题


背景:

最近发现项目开发过程太耗时间了,而且打包会发生两次,于是乎就去查看所有配置文件,尝试解决一些问题。

0.参考文档

0.1介绍 | Vue CLI (vuejs.org)(官方文档)

0.2【vue-cli5 bug】npm run build自动编译两次??? - 掘金 (juejin.cn)

0.3vendor.js文本过大

0.4vue性能优化

0.5启动项目一直是生产环境

0.6process.env(推荐阅读)

0.7module.exports和export详解 - 简书 (jianshu.com)

1.变量和用法解释

1.1process.env

官方解释为node.js里面的一个环境变量,你打印出来可以发现很多的key-value形式的环境变量在里面,还包含部分全局环境变量

1.2public Path

这个是制定部署路径,根据mode可以进行三元赋值(有条件控制赋值)

通常为`/`或 `./`

1.3moudle.export

这个函数就将当前配置文件的部分变量和方法进行暴露,然后给其他模块使用require进行调用

1.4resolve函数

解释对应模块下面的变量或方法以供使用

2..env环境配置

PS:此部分内容可以在vue cli的当里面可以找到

一般会将运行需要的环境写入该文件当中,约定俗成有三种文件

其中每个文件最基础包含一个NODE_ENV变量和一个请求接口的变量

其他变量你可以自定义,但他们都会进入process.env里面,所以你可以通过对该变量进行暴力匹配,获取到数据写入你自己的某些文件里面,实现共享存储通信或者配置文件与运行解耦!

一般而言分为development和production以及test,分别对应开发运行环境,部署测试环境,备用测试环境

而process.env.NODE_ENV默认和model保持一致

3.vue.config.js文件

每次运行`npm run serve`都会重新构建项目运行main.ts和vue.config.js,刷新也是

一般是用来做一些前置操作

4..browserslistrc配置文件

.browserslistrc 是在不同的前端工具之间共用目标浏览器和node版本的配置文件。

好吧,这个我没用过,暂时放这里

5.发现的问题

(1)项目总是全局导入,打的vender包很大

(2)有Utility-First CSS写法进入class当中,造成初次渲染样式坍塌(实际是样式未生效)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/137974.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

固定主机1500PLC与两台移动1200PLC之间以太网通讯

本方案搭建的是固定主机1500PLC与两台移动1200PLC之间以太网通讯。 无线通讯网络搭建 首先在固定端主机设备上的西门子S7-1500PLC上搭载一块达泰DTD418MB作为主站。然后在两台移动的西门子S7-1200PLC上分别搭载一块达泰DTD418MB作为从站。由此,便通过DTD418MB搭建…

Pandas教程(非常详细)(第五部分)

接着Pandas教程(非常详细)(第四部分),继续讲述。 二十五、Pandas sample随机抽样 随机抽样,是统计学中常用的一种方法,它可以帮助我们从大量的数据中快速地构建出一组数据分析模型。在 Pandas…

BIO、NIO、AIO之间有什么区别

文章目录 BIO优缺点示例代码 NIO优缺点示例代码 AIO优缺点示例代码 总结 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 BIO、NIO和AIO是Java编程语言中用于处理输入输出(IO…

【商城更新】神秘市场通行证上架、齿轮头归来//及下架内容

本周商城将于11月8号更新。本次商城除了神秘市场2023通行证上架之外,还有齿轮头黑货箱也会上架藏匿处。随之小兔奇趣齐聚大礼包、危险玩偶大礼包等饰品下架商城。 上架饰品: ▲神秘市场2023通行证 神秘市场2023通行证基础版 售价:1200G-coi…

租用服务器带宽类型应用

服务器带宽类型多样,以满足不同行业的需求。本文将介绍香港常见的服务器带宽类型及其应用领域。 1. 共享带宽 共享带宽是指多个用户共同使用同一台服务器的带宽资源。这种带宽类型适用于小型企业或个人网站,因为其成本较低。由于多个用户共享带宽资源&…

力扣第516题 最长回文子序列 c++ 动态规划 附Java代码 注释版

题目 516. 最长回文子序列 中等 相关标签 字符串 动态规划 给你一个字符串 s ,找出其中最长的回文子序列,并返回该序列的长度。 子序列定义为:不改变剩余字符顺序的情况下,删除某些字符或者不删除任何字符形成的一个序列。…

勘察设计考试公共基础之数学篇

1、数学 向量点积:向量叉积:平面的法向量为n(A,B,C),则该平面的点法式方程为: A(x-x0)B(y-y0)C(z-z0)0 两平…

upload-labs关卡8(基于黑名单的点绕过)通关思路

文章目录 前言一、回顾上一关知识点二、靶场第八关通关思路1、看源代码2、点绕过3、验证文件是否成功上传 总结 前言 此文章只用于学习和反思巩固文件上传漏洞知识,禁止用于做非法攻击。注意靶场是可以练习的平台,不能随意去尚未授权的网站做渗透测试&am…

并发事务下,不同隔离级别可能出现的问题

并发事务下,不同隔离级别可能出现的问题 1、事务的 ACID2、并发事务下,不同隔离级别可能出现的问题2.1、脏写2.2、脏读2.3、不可重复读2.4、幻读 3、SQL 中的四种隔离级别 1、事务的 ACID 原子性(Atomicity):原子性意味…

贝锐向日葵如何实现无人值守远程控制?

1.适用场景 (1)远程公司电脑应急办公(2)远程家里电脑游戏挂机(3)异地远程传输文件 2.操作步骤 (1)电脑安装向日葵个人版并登录贝锐账号(点击注册)&#xf…

Python - GFPGAN + MoviePy 提高人物视频画质

目录 一.引言 二.gif_to_png 三.gfp_gan 四.png_to_gif 五.总结 一.引言 前面我们介绍了 GFP-GAN 提高人脸质量 与 OCR 提取视频台词、字幕,前者可以提高图像质量,后者可以从视频中抽帧,于是博主便想到了将二者进行结合并优化人物 GIF …

Web实验(总)

目录 网站需求: 思路: 实验步骤: 第一步:准备工作 第二步:新建一个存储网页的目录 第三步:修改本地hosts映射 第四步:修改配置文件,建立基于http服务的网站 1)创建用户song和…

Misc | bucket 第二届“奇安信”杯网络安全技能竞赛

题目描述: 解密Base全家桶。 密文: 下载附件,解压得到一个txt文本,打开如下。 3441344134363435344435323442344534423441343635353334353333323442343935413442353434393535354135333441344534353536353535333332353534413436…

一些分享| 在线笔记、GIF图片生成方法

文章目录 在线笔记视频转GIF 本片博客旨在挖掘一些好用且免费的在线平台,持续更新中~ 正所谓科技解放双手,使用在线平台可以方便快捷地学习办公,节省时间。 在线笔记 语雀 https://www.yuque.com/dashboard 语雀是笔者用得最长最久的平台了…

华为防火墙双机热备配置案例(无vrrp)

思路: IP和路由、ospf要两台防火墙单配,hrp不会同步 其它zone和策略会同步,只在master上配就行了 FW_A主要配置: hrp enable hrp interface GigabitEthernet1/0/2 remote 172.16.0.2 interface GigabitEthernet1/0/0 undo shut…

CAD Exchanger SDK 有什么新内容?

CAD 交换器 3.23.0,2023 年 11 月强调:- 添加了新版本格式的导入:Autodesk Inventor 2023 和 2024、NX 2306。- 文档经过重大修改,使其更易于导航。它也是现在包含有关 SDK、Web Toolkit 和 Manufacturing Toolkit 的全面信息&…

4.运行时数据区

目录 概述堆虚拟机栈栈帧当前栈帧创建栈帧栈异常的两种情况 本地方法栈方法区方法区存储永久代和元空间的区别 结束 概述 整个 jvm 构成里,主要由三部分组成:类加载系统、运行时数据区、执行引擎。 由上图总结如下。 按照线程使用情况和职责分成两大类&…

sqli-labs关卡13(基于post提交的单引号加括号的报错盲注)通关思路

文章目录 前言一、回顾第十二关知识点二、靶场第十三关通关思路1、判断注入点2、爆显位3、爆数据库名4、爆数据库表5、爆数据库列6、爆数据库关键信息 总结 前言 此文章只用于学习和反思巩固sql注入知识,禁止用于做非法攻击。注意靶场是可以练习的平台,…

学校教的Python根本不够!来看看Python学习路线图

如果只靠学校学的东西去找工作,能找到工作吗? 今天给大家看一个粉丝的真实求职案例,想做Python方面的工作,投了二十几个简历却没人要,心态崩了。为什么没人要?我来告诉你答案。 然后我还会结合我的这些年的…

什么是Vue.js的计算属性(computed properties)?与方法(methods)有什么不同?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…