vite.config.js配置入门详解

目录
  • 1 如何创建vite项目?
  • 2 如何让vite项目启动时自动打开浏览器?
  • 3vite启动默认端口为3000?如何更改默认端口?
  • 4 vite如何设置热更新?
  • 5vite中如何配置别名路径?
  • 6 vite中如何设置便捷图片路径引用?
  • 7如何把vite打包以后的js,css和img资源分别分门别类在js/css/img文件夹中?
  • 8 如何通过vite给项目配置多个环境?
  • 9 vite中如何配置多入口,进行多页面开发?
  • 10 如何设置开启生产打包分析文件大小功能?类似webpack-bundle-analyzer?
  • 11 如何解决require is not define报错的的问题? 场景: 比如我们assets文件夹下有一个静态的json:

1 如何创建vite项目?

step 1 :
 npm init vite@latest
 yarn create vite
step2 :
npm init vite@latest my-vue-app --template vue
 
npm 7+, 需要额外的双横线:
npm init vite@latest my-vue-app -- --template vue
 
# yarn
yarn create vite my-vue-app --template vue

2 如何让vite项目启动时自动打开浏览器?

注:vite针对开发环境,打包环境和预览环境分别定义了三个选项: server、build、preview。 开发环境server类似于webpack中的devServer。

export default ({mode})=>{
return defineConfig({
  server:{
    open:true, //vite项目启动时自动打开浏览器
  },
}
}

3vite启动默认端口为3000?如何更改默认端口?

export default ({mode})=>{
return defineConfig({
  server:{
    port:8080, //vite项目启动时自定义端口
  },
}
}

4 vite如何设置热更新?

vite默认开发环境关闭了热更新。代码更改需要手动更新,设置更改代码自动刷新页面需要设置hmr:true

export default ({mode})=>{
return defineConfig({
  server:{
    hmr:true, //开启热更新
  },
}
}

5vite中如何配置别名路径?

设置resolver选项

import { resolve } from 'path';
 
export default ({mode})=>{
return defineConfig({
  resolve:{
      alias:{
        "@":resolve(__dirname,"src"),
        "@c":resolve(__dirname,"src/components"),
      }
  },
}
}

6 vite中如何设置便捷图片路径引用?

比如图片资源都在src/assets/image目录下,不想在项目中每次都通过require("../assets/image/1.jpg")这样写一长串去引用。能否通过 类似nuxt中的快速引用?

  <img src="/images/1.png" alt="" />
  这里直接引用
export default ({mode})=>{
return defineConfig({
  resolve:{
      alias:{
      "/images":"src/assets/images/"
      //这里不能通过path模块解析路径的写法
      }
  },
}
}

7如何把vite打包以后的js,css和img资源分别分门别类在js/css/img文件夹中?

//由于是处理打包以后的资源,所以需要配置build选项
export default ({mode})=>{
return defineConfig({
   build:{
    assetsDir:"static",
    rollupOptions:{
      
      input:{
        index:resolve(__dirname,"index.html"),
        project:resolve(__dirname,"project.html")
      },
      output:{
        chunkFileNames:'static/js/[name]-[hash].js',
        entryFileNames:"static/js/[name]-[hash].js",
        assetFileNames:"static/[ext]/name-[hash].[ext]"
      }
    },
  },
 
}
}

8 如何通过vite给项目配置多个环境?

以开发、测试和生产环境为例

(1)在项目根目录下分别新建.env.development,.env.test,.env.production文件

//.env.devopment文件内容
NODE_ENV="development"
VITE_APP_BASEAPI="https://www.dev.com"
//.env.test文件内容
NODE_ENV="test"
VITE_APP_BASEAPI="https://www.test.com"
//.env.production文件内容
NODE_ENV="production"
VITE_APP_BASEAPI="https://www.production.com"

(2) package.json文件做如下修改

 "scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
    "test": "vite build --mode test",
    "preview": "vite preview"
  },

(3)项目中通过Import.meta.env.VITE_APP_BASEAPI来获取对应环境的值

<template>
  <div>
    <Item></Item>
  </div>
 
</template>
<script setup>
    import { defineComponent, onMounted, ref } from 'vue'
    import Item from "@c/item.vue"
    console.log("env", import.meta.env.VITE_APP_BASEAPI)
    console.log("可选链", obj?.gender || "male")
})
</script>

9 vite中如何配置多入口,进行多页面开发?

step1:在根目录新建一个入口页面以project.html为例,同时在根目录下新建一个project文件夹,在此文件夹新建一个main.js,App.vue

step2:vite.config.js作如下修改:

import { defineConfig,loadEnv  } from 'vite'
import {resolve} from "path";

export default ({mode})=>{
return defineConfig({
  build:{
    rollupOptions:{
      input:{
        index:resolve(__dirname,"index.html"),
        project:resolve(__dirname,"project.html")
      },
     //output:{
       // chunkFileNames:'static/js/[name]-[hash].js',
        //entryFileNames:"static/js/[name]-[hash].js",
        //assetFileNames:"static/[ext]/name-[hash].[ext]"
      }
    },
  },

  plugins: [
    vue(),
  ]
})

} 

step3:vite run dev 启动以后在url加上project.html查看project项目 localhost:3000/project.html

10 如何设置开启生产打包分析文件大小功能?类似webpack-bundle-analyzer?

//1 安装rollup-plugin-visualizer 插件
npm i rollup-plugin-visualizer
//2 vite.config.js中引入插件
import {visualizer} from "rollup-plugin-visualizer"
export default ({mode:string})=>{
 
  const plugins=[ 
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    visualizer({
        open:true,  //注意这里要设置为true,否则无效
        gzipSize:true,
        brotliSize:true
     })
  ];
 }
 return  defineConfig({
            
            resolve:{
              alias:{
                "@":resolve(__dirname,"src"),
                "/images":"src/assets/images/"
              }
            },
            plugins
          })

11 如何解决require is not define报错的的问题? 场景: 比如我们assets文件夹下有一个静态的json:

        list:[
            {
                shop_id:1,
                shop_name:'搜猎人艺术生活',
                products:[
                    {
                        pro_id:101,
                        text:'洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶',
                        price:480,
                        num:1,
                        img:require("./images/1.png"),
                        sum:480,
                        checked:false//商品选中状态
                    },
                    {
                        pro_id:102,
                        text:'花露水花露水花露水花露水花露水花露水花露水花露水',
                        price:680,
                        num:1,
                        img:require('./images/2.png'),
                        sum:680,
                        checked:false
                    },
                    {
                        pro_id:103,
                        text:'燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片',
                        price:380,
                        num:1,
                        img:require('./images/3.png'),
                        sum:380,
                        checked:false
                    }
                ],
                check:false,//店铺选中状态
                choose:0,//商品选中个数
            },
            {
                shop_id:2,
                shop_name:'卷卷旗舰店',
                products:[
                    {
                        pro_id:201,
                        text:'剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀',
                        price:580,
                        num:1,
                        img:require('./images/4.png'),
                        sum:580,
                        checked:false
                    },
                    {
                        pro_id:202,
                        text:'卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸',
                        price:780,
                        num:1,
                        img:require('./images/5.png'),
                        sum:780,
                        checked:false
                    }
                ],
                check:false,
                choose:0,
            },
           
        ],
    status:false,//全选选中状态
    allchoose:0,//店铺选中个数
    allsum:0,//总计价格
    allnum:0,//总计数量
}
export default fetchData

此时运行你回发现报错:require is not define? 解决办法:

const fetchData={
        list:[
            {
                shop_id:1,
                shop_name:'搜猎人艺术生活',
                products:[
                    {
                        pro_id:101,
                        text:'洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶',
                        price:480,
                        num:1,
                        img:new URL("./images/1.png",import.meta.url).href,
                        sum:480,
                        checked:false//商品选中状态
                    },
                    {
                        pro_id:102,
                        text:'花露水花露水花露水花露水花露水花露水花露水花露水',
                        price:680,
                        num:1,
                        img:new URL('./images/2.png',import.meta.url).href,
                        sum:680,
                        checked:false
                    },
                    {
                        pro_id:103,
                        text:'燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片燕麦片',
                        price:380,
                        num:1,
                        img:new URL('./images/3.png',import.meta.url).href,
                        sum:380,
                        checked:false
                    }
                ],
                check:false,//店铺选中状态
                choose:0,//商品选中个数
            },
            {
                shop_id:2,
                shop_name:'卷卷旗舰店',
                products:[
                    {
                        pro_id:201,
                        text:'剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀剃须刀',
                        price:580,
                        num:1,
                        img:new URL('./images/4.png',import.meta.url).href,
                        sum:580,
                        checked:false
                    },
                    {
                        pro_id:202,
                        text:'卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸卫生纸',
                        price:780,
                        num:1,
                        img:new URL('./images/5.png',import.meta.url).href,
                        sum:780,
                        checked:false
                    }
                ],
                check:false,
                choose:0,
            },
            
        ],
    status:false,//全选选中状态
    allchoose:0,//店铺选中个数
    allsum:0,//总计价格
    allnum:0,//总计数量
}
export default fetchData

注意引用方式的变化:require------->new URL('./images/5.png',import.meta.url).href

到此这篇关于vite.config.js配置入门详解的文章就介绍到这了,更多相关vite.config.js配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了,一直没机会升级3.0版本 开始零零碎碎开始写一些功能,顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口脚本和模板 */ const getPages = (() => { const [ globPathHtml, globPathJs, pages, tempSet ] = [ ['./src/modules/**/in

  • vue - vue.config.js中devServer配置方式

    前言 这里写你调用接口的基础路径,来解决跨域,如果设置了代理,那你本地开发环境的axios的baseUrl要写为'',即空字符串 只有一个接口ip端口时 devServer: { open: false, // 跨域 proxy: { '/nuojinadm/': { target: 'http://192.168.0.11/', changeOrigin: true } } } 2.设置axios中的baseUrl 与proxy端口一致 baseUrl: { dev: '/nuojinadm/

  • 如何配置vue.config.js 处理static文件夹下的静态文件

    最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大:呃呃....(ps:就想给自己找点别扭) 回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据: fetch("../static/test.json") .then(res => res.json()) .then(res => { //获取到

  • Vue CLI4 Vue.config.js标准配置(最全注释)

    前言: Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成.那么该文件的配置至关重要.现在我们来看一下最新配置是怎么配置的. 安装 npm i -d vue-cli-configjs // vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression

  • vue-cli3中vue.config.js配置教程详解

    前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

  • Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录 语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build

  • vue.config.js常用配置详解

    使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代. 在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值 module.exports =

  • 解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    1.在vue项目根目录下新建vue.config.js(不是在src下面) vue.config.js配置文件: module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vu

  • vue.config.js打包优化配置

    百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻 优化方向 1.图片资源压缩 2.将 productionSourceMap 设为 false,map不进行生成 3.cdn配置(可选) 4.代码压缩 5.公共代码抽离(个人感觉没啥用) 未优化之前的 //感觉太大了 抬它 优化之后的 废话不多说了,上代码是重点 这些是必要的下载 /*cnpm install image-webpack-loader --save-dev c

  • vite.config.js配置入门详解

    目录 1 如何创建vite项目? 2 如何让vite项目启动时自动打开浏览器? 3vite启动默认端口为3000?如何更改默认端口? 4 vite如何设置热更新? 5vite中如何配置别名路径? 6 vite中如何设置便捷图片路径引用? 7如何把vite打包以后的js,css和img资源分别分门别类在js/css/img文件夹中? 8 如何通过vite给项目配置多个环境? 9 vite中如何配置多入口,进行多页面开发? 10 如何设置开启生产打包分析文件大小功能?类似webpack-bundle

  • webpack项目中使用vite加速的兼容模式详解

    目录 前言 目的 要处理的问题 动手 共用 index.html 共用配置 兼容环境变量 自动导入 资源引入 svg-sprite-loader 替代方案 其他 效果 前言 随着公司前端工程越来越大,启动是无尽的等待,修改是焦急的等待. vite 到现在生态也起来了,就有了把项目改造成 vite 的想法,但是项目后面可能要依赖 qiankun 改造成微前端项目,现在 qiankun 对 vite 还没有好的解决方法,我就想采取一个折中的办法,保留 webpack,再兼容 vite,两条路都留着.

  • vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

  • vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    1.如果只使用config配置的相关js接口 可采用如下方式引入 执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口 一定不要执行npm命令引入

  • ThinkPHP 在阿里云上的nginx.config配置实例详解

    具体代码如下所示: # For more information on configuration, see: # * Official English Documentation: http://nginx.org/en/docs/ # * Official Russian Documentation: http://nginx.org/ru/docs/ user nginx; worker_processes auto; error_log /var/log/nginx/error.log;

  • vue eslint简要配置教程详解

    在前端开发过程中,难免习惯了 console.log . 但是刚入门vue时,基于vue-cli 3.x,运行时终端老抛出error.一看信息,发现是不能使用 console.log ,另外import后的但是没有使用的变量也提示error信息,这是不错的. 1. 修改rules 但的你想去掉console提示?那可以通过 package.json 修改 rules 规则. 在package.json中,有这几其中的一项,在 rules 中添加 "no-console": "

  • Vue3从0搭建Vite打包组件库使用详解

    目录 打包配置 声明文件 打包配置 本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及@vitejs/plugin-vue pnpm add vite @vitejs/plugin-vue -D -w 在 components 文件下新建vite.config.ts配置文件 import { defineConfig } from "vit

  • axios中cookie跨域及相关配置示例详解

    前言 最近在跨域.cookie 以及表单上传这几个方面遇到了点小问题,做个简单探究和总结.本文主要介绍了关于axios中cookie跨域及相关配置的相关内容,下面话不多说了,来一起看看详细的介绍吧. 1. 带cookie请求 - 画个重点 axios默认是发送请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决. 这个时候需要注意需要后端配合设置: header信息 Access-Control-Allow-Credentials:true Access

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

随机推荐