vite.config.js详细配置。

这篇具有很好参考价值的文章主要介绍了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导入:
vite.config.js,解决跨域的方式,开发环境配置表,javascript,webpack,前端,vite
commonJs导出,es6导入
vite.config.js,解决跨域的方式,开发环境配置表,javascript,webpack,前端,vite

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} = env

return{
 //项目部署在主域名的子文件使用,例如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-extensions
      extensions : ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json','.vue']
  },
 //本地运行配置,以及反向代理配置
 server: {
   port: "9000",//端口
  // host: "localhost",//ip地址例如192.168.1.177
   host:true,
   open: true,//服务启动时自动在浏览器中打开应用
  // 反向代理配置
  proxy: { //配置多个代理
   '/dev-api': {
    target: "https://xxxx.com/",//例子:http://192.168.1.177:8080 或测试服务器https://xxxx.com
    changeOrigin: 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: {//大写AtRule
              charset: (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)]
            }
        }

vite官网:
https://cn.vitejs.dev/config/shared-options.html#css-postcss
扩展知识:
vite.config.js,解决跨域的方式,开发环境配置表,javascript,webpack,前端,vite
记录一下,少走弯路!!!文章来源地址https://www.toymoban.com/news/detail-794102.html

到了这里,关于vite.config.js详细配置。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js跨域的解决方案

    指的是浏览器不能执行其他网站的脚本,简单来说是浏览器同源政策的限制,浏览器针对于ajax的限制。 同源政策 两个页面拥有相同的 协议,端口,域名 就是同源,如果有一个不相同就是不同源。 同源政策产生的目的 保护用户信息安全,防止一些网站盗取用户信息。 常见

    2024年02月10日
    浏览(104)
  • Vue2解决跨域的3种方式

    1.1 jsonp 以前的技术,通过script标签跨域请求,服务器端返回的是符合js语法的函数调用,函数的形参即数据 1.2 CORS 跨域资源共享,需要服务器端进行配置 1.3  服务器代理 (1) 通过在vue.config.js中配置proxy实现跨域 (开发阶段) (2) 通过Nginx服务器代理实现跨域 (生产阶段

    2024年02月04日
    浏览(42)
  • Java实现后端跨域的常见解决方式

    1.1、maven依赖 pom.xml 1.2、接口 1.3、配置 application.properties   至此我们就提供了一个接口: http://localhost:8080/crossServer/cross/request 2.1、maven依赖 pom.xml 2.2、接口 2.3、页面 2.4、配置 application.properties   至此我们就提供了一个接口: http://localhost:8081/crossWeb/test/request ,访问此页

    2024年02月09日
    浏览(43)
  • SpringBoot解决跨域的方法详细教程

    Spring Boot提供了多种解决跨域问题的方法,以下是其中几种常用的方法: 使用@CrossOrigin注解是一种简单且快速的解决跨域问题的方法。在Spring Boot的Controller类或方法上添加@CrossOrigin注解,可以指定允许跨域访问的源、方法、头部等信息。 1. 在Controller类或方法上添加@CrossOrig

    2024年02月13日
    浏览(38)
  • vue如何解决跨域的问题,有哪几种方式?

    在使用axios发送请求之后,没有得到返回的数据,打开控制台发现如下图所示的报错: 这是提示跨域了。所有使用JavaScript的浏览器都会支持同源策略。同源策略即指域名/协议/端口号相同。只要有一个不同,就会当作跨域请求。  解决方法为: 1. CORS 后端通过 CORS 解决跨域

    2024年02月08日
    浏览(69)
  • vue.config.js 跨域配置

    一般是配置 .env .env.production 等。 默认配置就是用 .env 示例: 为啥要封装,因为开发模式需要proxy代理。。而线上模式不需要。 /dev-api 只要不和web里的path 冲突就行,也可以取其他名字。 开发模式 就是web的路径,再加个特殊的path 用作代理。 其他模式 不需要proxy配置,直接走

    2024年02月11日
    浏览(44)
  • Vue+vite创建项目关于vite.config.js文件的配置

    Vue项目创建时,我们见过vue-cli 创建项目和webpack 创建项目等方式。 现在Vue 3版本使用npm/pnpm create vue@latest 创建项目,是搭配使用vite工具构建的。 创建完成的项目,最明显的去别就是,项目配置文件命名不同,当然,配置语法也有不同。 vue-cli 创建的项目,项目配置文件文件

    2024年02月12日
    浏览(56)
  • vue2的vue.config.js中简单配置代理跨域

    调用后端接口访问后台数据,但是因为请求url的协议、域名、端口三者之间任意一个与当前页面url不同产生了跨域,我们vue项目运行的地址一般就是localhost 8080端口,而且后端也没有配置允许跨域(后端如果配置跨域通常是cors),所以前端就要配置跨域,Vue跨域在vue.config.j

    2024年02月15日
    浏览(38)
  • UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)

    UniApp 运行到浏览器的时候,接口会跨域报错,这里通过两种方式解决,第一:修改Uniapp自带的manifest.json 源码视图并进行配置h5设置。第二:在项目根目录新建vue.config.js并配置代理。 二选一即可。 修改或调整配置文件后,推荐重新运行,以防不生效。 配置完成后,请求接口

    2024年01月16日
    浏览(46)
  • vue3项目vite.config.js配置“代理”、“端口”、“打包名”、“图片压缩”

    前言 我们在搭建vue3项目的时候不可避免的会遇到“代理”、“端口”、“打包名”、“图片压缩”等配置问题,本文逐一讲述该怎么样在vite.config.js中去配置。 一、配置代理端口和代理转发 vite.config.ts添加如下代码 ts.config.json添加如下代码 图片压缩先要引入vite-plugin-imagem

    2024年02月07日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包