vite vue3 config配置

简介: 【10月更文挑战第5天】

在使用 Vite 结合 Vue 3 进行项目开发时,vite.config.js 配置文件起着重要的作用。
配置项和示例:

import {
    defineConfig } from 'vite';
import vue from '@vitejs/plugin/vue';

export default defineConfig({
   
  plugins: [vue()],
  server: {
   
    // 服务器配置
    port: 8080, 
    open: true, 
  },
  build: {
   
    // 构建配置
    outDir: 'dist', 
    assetsDir: 'assets', 
    minify: 'esbuild', 
    sourcemap: true, 
  },
  resolve: {
   
    // 解析配置
    alias: {
   
      '@': '/src', 
    },
  },
});
AI 代码解读

一、服务器配置

  1. port:指定服务器运行的端口号。
  2. open:在启动服务器后自动打开浏览器。

二、构建配置

  1. outDir:指定构建输出的目录。
  2. assetsDir:指定静态资源的输出目录。
  3. minify:选择压缩工具,如 esbuildterser
  4. sourcemap:是否生成源文件映射,方便调试。

三、解析配置

  1. alias:设置路径别名,方便项目中的路径引用。

除此之外,还可以根据项目需求进行其他配置,比如添加自定义的 CSS 预处理插件、设置环境变量等。

目录
打赏
0
0
0
0
172
分享
相关文章
微服务(四)-config配置中心的配置加解密
微服务(四)-config配置中心的配置加解密
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
530 0
|
11月前
|
Vue3基础(19)___vite.config.js中配置路径别名
本文介绍了如何在Vue 3的Vite配置文件`vite.config.js`中设置路径别名,以及如何在页面中使用这些别名导入模块。
415 0
Vue3基础(19)___vite.config.js中配置路径别名
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
【Azure 应用服务】App Service 通过配置web.config来添加请求返回的响应头(Response Header)
【Azure 应用服务】App Service 通过配置web.config来添加请求返回的响应头(Response Header)
161 0
【Azure Redis 缓存】如何使得Azure Redis可以仅从内网访问? Config 及 Timeout参数配置
【Azure Redis 缓存】如何使得Azure Redis可以仅从内网访问? Config 及 Timeout参数配置
124 0
【Azure 应用服务】在Azure App Service for Windows 中部署Java/NodeJS/Python项目时,web.config的配置模板内容
【Azure 应用服务】在Azure App Service for Windows 中部署Java/NodeJS/Python项目时,web.config的配置模板内容
121 0
vue.config.js配置详解
【8月更文挑战第16天】vue.config.js配置详解
601 1
vue.config.js配置详解
|
12月前
|
Profile Config 多环境不同配置
Profile Config 多环境不同配置
73 0
|
12月前
NLog.config 配置
NLog.config 配置
138 0

热门文章

最新文章

  • 1
    IDEA添加Swagger2:Parameter 0 of method linkDiscoverers in org. springframework hateoas.config.Hateoasconfiguration required a single bean, but 15 were found:
    216
  • 2
    error: Failed dependencies: mariadb-connector-c-config is obsoleted by mysql-community-server-8.0.36-1.el7.x86_64 问题解决
    708
  • 3
    Spring Boot与Spring Cloud Config的集成
    371
  • 4
    若依修改标题和icon,在vue.config.js和.env.development进行修改
    868
  • 5
    若依修改,若依的com.ruoyi.framework.config在那?搜索文件使用ctrl+shift+f不用搜狗输入法,其他輸入法,用英文
    113
  • 6
    若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
    511
  • 7
    部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
    163
  • 8
    若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
    540
  • 9
    若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
    1362
  • 10
    文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
    402
  • 登录插画

    登录以查看您的控制台资源

    管理云资源
    状态一览
    快捷访问