vite.config.js

Vue3+vite

vite和webpack区别?
1.vite服务器启动速度比webpack快,由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,vite的开发时优势越明显。vite热更新比webpack快,vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可,而不是像webpack重新将该模块的所有依赖重新编译。

2.Vite的使用简单,只需执行初始化命令,就可以得到一个预设好的开发环境,开箱即获得一堆功能,包括:CSS预处理、html预处理、异步加载、分包、压缩、HMR等。使用复杂度介于Parcel和Webpack的中间,只是暴露了极少数的配置项和plugin接口,既不会像Parcel一样配置不灵活,又不会像Webpack一样需要了解庞大的loader、plugin生态,灵活适中、复杂度适中。

3.vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地快速开发启动:
快速的冷启动,不需要等待打包操作;
即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。

WebPack :
webpack是基于模块化的打包(构建)工具,通过一个入口文件递归出所有模块的依赖关系,经过一系列的过程(压缩,合并),最终生成运行的代码。

webpack的安装:
通过npm install安装 webpack ,webpack-cli
webpack:核心包,包含webpack构建过程中要用到的所有api
webpack-cli:提供一个简单的cli命令来调用webpack核心包的api,来完成构建过程
安装推荐使用本地安装,webpack使每个项目都使用自己的webpack版本进行构建。

npm install -D webpack webpack-cli

webpack使用:
webpack默认从src文件夹下的index.js读取入口文件,打包到dist文件夹下的的main.js中
设置开发环境和生成环境

"scripts": {"dev": "webpack --mode=development","build":"webpack --mode=production"},

 webpack兼容性:
webpack支持CommonJs和Es6模块化的混合使用,也就是说你是commonJs导出的,可以es6导入。

es6导出 ,commonJs导入:

commonJs导出,es6导入 

 vite.config.js

//简洁版
import { defineConfig } from 'vite';
export default defineConfig(({command,mode})=>{return {... //各项配置}}
);

当以命令方式运行 vite 时,vite 会自动解析项目根目录下 vite.config.js 的文件。配置不全时,在开发环境下运行都是正常的,但是打包上线的时候就会出现各种问题。如:

1.假设不配置 base 时,打包之后,访问时出现白屏。
2.alias 不配置的时候,每次引入文件需要找根目录,比较麻烦。

以下是 vite.config.js 的更多常用参数配置以及意义:

//详细版
import { defineConfig, loadEnv } from 'vite' // 帮手函数,这样不用 jsdoc 注解也可以获取类型提示
import path from 'path'
import createVitePlugins from './vite/plugins'// https://vitejs.dev/config/
export default  defineConfig(({command, mode })=>{// 获取.env文件里定义的环境变量
const env = loadEnv(mode, process.cwd());
//console.log(env);   //变量在命令行里打印出来
//.env文件中的环境变量必须以VITE_为前缀,否则无法引用成功
const   {VITE_APP_ENV} = envreturn{//项目部署在主域名的子文件使用,例如http://localhost:3000/myvite/。不填默认就是/base: VITE_APP_ENV==='字段名' ? '/' : '/', // 例子:env.VITE_APP_BASE_URL || '/'plugins: createVitePlugins(env, command === 'build'),resolve: {alias: {//别名配置"~": path.resolve(__dirname, "./"), //配置的别名"@": path.resolve(__dirname, "./src"),},//共享配置 https://cn.vitejs.dev/config/shared-options.html#resolve-extensionsextensions : ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json','.vue']},//本地运行配置,以及反向代理配置server: {port: "9000",//端口// host: "localhost",//ip地址例如192.168.1.177host:true,open: true,//服务启动时自动在浏览器中打开应用// 反向代理配置proxy: { //配置多个代理'/dev-api': {target: "https://xxxx.com/",//例子:http://192.168.1.177:8080 或测试服务器https://xxxx.comchangeOrigin: true,///设置访问目标地址允许跨域rewrite: (p) => p.replace(/^\/dev-api/, '')},'/prod-api': {target: "https://xxxx.com/",changeOrigin: true,///设置访问目标地址允许跨域rewrite: (p) => p.replace(/^\/prod-api/, '')},}},css: {// postCss 共享配置postcss: {plugins: [//扩展插件{postcssPlugin: 'internal:charset-removal',AtRule: {//大写AtRulecharset: (atRule) => {//char set字符集if (atRule.name === 'charset') {atRule.remove();//删除}}}}]},},}
})

开发时,如果需要代理多个服务器,场景为后端接口分布在不同开发同事本机上,开发时通过选项写法代理无缝对接多个服务器

// vite.config.ts 代理配置proxy: { // 代理配置'/user': {target: 'https://www.baidu.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/user/, '')},'/cus': {target: 'https://www.taobao.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/cus/, '')}},
//css 共享配置-扩展的插件  例子:css: {postcss: {plugins: [px2rem(px2remOptions)]}}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI智能涂抹修补解决方案助力企业高效创作

传统的手动涂抹修补方式不仅效率低下,而且往往难以达到理想的视觉效果。美摄科技凭借深厚的AI技术研发实力,推出了面向企业的AI智能涂抹修补解决方案,为企业带来前所未有的创作体验。 美摄科技的AI智能涂抹修补解决方案,具备强大…

集群式无人机仿真环境和数据集

仿真环境和数据集 Quick StartAcknowledgementsSwarmSim Quick Start Compiling tests passed on 20.04 with ros installed. You can just execute the following commands one by one. # Download the Simulator and run it wget https://cloud.tsinghua.edu.cn/library/34…

年少不知EFCore好,错把SqlSugar当成宝

背景:依然记得我的第一份WebApi项目使用得是SqlSugar,当时还没有系统学习b/s这边的知识,跟着别人做项目用SqlSugar觉得非常方便,减少了自己手写ADO.Net的痛苦。但是今天发现这个EFCore也是巨好用啊,下面写一下他的简单…

DDD 的四层领域模型是怎样的?包含哪些基础概念?

DDD的四层领域模型如下所示: 展现层:这一层负责向用户显示信息和解释用户命令,完成前端界面逻辑。并将用户请求传递给应用层。应用层:这一层是很薄的一层,负责协调领域层中的领域对象,组成具体应用场景。应…

svn cannot set LC_CTYPE locale

svn报警告 svn: warning: cannot set LC_CTYPE locale svn: warning: environment variable LC_CTYPE is en_US.UTF-8 svn: warning: please check that your locale name is correct 使用命令 sudo dpkg-reconfigure locales 选择en_US.UTF-8,我的警告就好了 参…

vue3从精通到入门12:vue3的生命周期和组件

生命周期: 生命周期钩子主要包括: beforeCreate:组件实例被创建之前调用。在这个阶段,组件的 props 和 data 还未被初始化。created:组件实例创建完成后调用。在这个阶段,组件的 props 和 data 已经被初始…

Linux空洞文件

起因 今天在学习RandomAccessFile这个类时&#xff0c;看到里面有一个方法 public void seek(long pos) throws IOException {if (pos < 0) {throw new IOException("Negative seek offset");} else {seek0(pos);}}这个方法没有对文件的长度的校验&#xff0c;如…

springcloud==openfeign+springboot仿照openfeign自定义注解和使用

我的目的是参照原本openfeign的注解&#xff0c;但是我想实现每个外部服务的URL可以自己指定生成的规则。 自定义EnableMyFeignClients 自定义MyImportBeanDefinitionRegistrar&#xff0c;更改获取URL的逻辑。这个应该是个可行的方式&#xff0c;但是RIBBON的视线方式应该会…

LangChain入门:11.Pydantic(JSON)解析器实战

摘要 在数字化营销的浪潮中&#xff0c;自动化内容生成成为了提升效率和用户参与度的利器。本文将详细介绍如何利用LangChain的自然语言处理能力和Pydantic的数据验证特性&#xff0c;构建一个自动化的花店文案生成器。通过这个工具&#xff0c;您可以快速为各种花卉生成吸引人…

Gateway是什么?(SpringCloudAlibaba组件)

1、网关介绍 **网关(Gateway)又称网间连接器、协议转换器。网关在传输层上以实现网络互连&#xff0c;是最复杂的网络互连设备&#xff0c;仅用于两个高层协议不同的网络互连。**网关的结构也和路由器类似&#xff0c;不同的是互连层。网关既可以用于广域网互连&#xff0c;也可…

截稿倒计时 CCF-B COCOON’24论文延期至4月8日提交

会议之眼 快讯 第30届COCOON 2024 (International Computing and Combinatorics Conference)即国际计算与组合学会议将于 2024 年 8月23日-25日在中国上海举行&#xff01;COCOON是一个专注于计算机科学理论领域的国际性学术会议&#xff01;COCOON会议自1995年起举办&#xf…

Promise-以往的异步编程模式

要理解这个 double 函数在调度异步操作后为什么会立即退出&#xff0c;我们可以一步一步拆解它的执行流程。 首先&#xff0c;看一下 double 函数的定义&#xff1a; function double(value) {setTimeout(() > setTimeout(console.log, 0, value * 2), 1000); }当你调用 d…

JDK下载安装配置

一.JDK安装配置。 1.安装注意路径,其他直接下一步。 2.配置。 下接第4步. 代码复制: JAVA_HOME D:\Program Files\Java\jdk1.8.0_91 D:\Program Files\Java\jdk1.8.0_91\bin 3.验证(CMD)。 java javac java -version 二.下载 1.下载JDK1.5-1.9(所有版本)下载: https://www.…

docker环境中宿主机防火墙添加ssh无法生效的问题分析

背景 在部署了docker容器的环境中&#xff0c;要在防火墙开通22端口&#xff0c;即ssh服务&#xff0c;以便在终端可以正常登陆。使用firewall-cmd在docker区域添加了22端口&#xff0c;但是没有起作用。后再public区域添加22端口才起作用。为什么docker区域不起作用&#xff…

使用vuepress搭建个人的博客(一):基础构建

前言 vuepress是一个构建静态资源网站的库 地址:VuePress 一般来说,这个框架非常适合构建个人技术博客,你只需要把自己写好的markdown文档准备好,完成对应的配置就可以了 搭建 初始化和引入 创建文件夹press-blog npm初始化 npm init 引入包 npm install -D vuepress…

蓝桥杯_数学模板

1.试除法判定质数 #include <iostream> using namespace std;bool is_zs(int x) {if(x<2) return false;for(int i2;i<x/i;i)if(x%i0)return false;return true; }int main() {int n; cin>>n;while(n--){int x; cin>>x;if(is_zs(x)) cout<<&quo…

windows下安装iteliij Idea2023.3

首先从官网下载 下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 双击打开进行安装&#xff1a; 安装完成后&#xff0c;需要对Idea进行稍微处理下。使用我分享给大家的文件&#xff0c;操作以下步骤&#xff1a; 注意&#xff1a;不能打开IDEA软件。 进入到scripts中点击un…

C语言存储⽅式有哪⼏种?分别是什么?

一、问题 什么叫存储⽅式&#xff1f;存储⽅式有⼏种&#xff1f;分别是什么&#xff1f; 二、解答 因变量存储⽅式不同⽽产⽣的特性称作变量的⽣存期。⽣存期表示了变量存在的时间。⽣存期加上前⾯讲过的作⽤域是从时间和空间这两个不同的⻆度来描述变量的特性&#xff0c; 这…

[技术闲聊]我对电路设计的理解(一)

讲点题外话&#xff0c;也算回忆&#xff0c;捋一捋过往的生活。 大学毕业后&#xff0c;进入公司实习&#xff0c;从产线开始&#xff0c;为期一个月&#xff0c;当时课室负责人说&#xff0c;进入一家公司&#xff0c;首先了解公司的产品&#xff0c;产线是最直接最合适最近距…

独孤思维:高客单价项目,必须来一个

01 上次和水龙聊完以后&#xff0c;完成了图书电商项目小报童的梳理。 而且还让我规划后端低转高产品的设计。 目前独孤&#xff0c;准备以图书电商项目私教作为切入点&#xff0c;捆绑自己的合伙人。 设计高客单价项目。 所以&#xff0c;独孤4月的副业规划目标&#xff…