关于vite.config.ts文件的配置方式

 更新时间:2022年08月24日 09:32:30   作者:呀呀音  
这篇文章主要介绍了关于vite.config.ts文件的配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vite.config.ts文件的配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],  // 注册插件
  server: {
    open: true
  },
  resolve: {
    alias: {
      // 如果报错__dirname找不到,需要安装node,执行yarn add @types/node --save-dev
      "@": path.resolve(__dirname, "src"),
      "comps": path.resolve(__dirname, "src/components"),
    }
  }
})

1、alias配置别名

如果报错__dirname找不到,需要安装node,

执行yarn add @types/node --save-dev

2、关于path的引入

不要再使用 let path = require(‘path’)

使用 import path from ‘path’ 进行引入

vite项目在jenkins自动打包报错

failed to load config from ../vite.config.js You installed esbuild on

vite项目在jenkins自动打包报错找不到esbuild-linux-64

在window环境开发用的找不到esbuild-windows-64,在linux环境构建需要使用esbuild-linux-64,找不到esbuild-linux-64就会报错

实际报错:

error during build:
11:21:11 Error: 
11:21:11 You installed esbuild on another platform than the one you're currently using.
11:21:11 This won't work because esbuild is written with native code and needs to
11:21:11 install a platform-specific binary executable.
11:21:11 
11:21:11 Specifically the "esbuild-windows-64" package is present but this platform
11:21:11 needs the "esbuild-linux-64" package instead. People often get into this
11:21:11 situation by installing esbuild on Windows or macOS and copying "node_modules"
11:21:11 into a Docker image that runs Linux, or by copying "node_modules" between
11:21:11 Windows and WSL environments.

报错原因: vite在linux环境打找不到esbuild-linux-64

2种解决方案

1、在linux环境下,打包前先 npm i esbuild-linux-64

2、在外网windows环境下运行以下命令(可在版本号去package-lock.json中查看esbuild-linux-64版本号后自行修改下载)

curl -O https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.34.tgz

下载后解压得到package文件夹,将其改名为esbuild-linux-64复制到当前项目node_modules目录下即可

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    今天小编就为大家分享一篇vue.js项目 el-input 组件 监听回车键实现搜索功能示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 使用Vue.js创建一个时间跟踪的单页应用

    使用Vue.js创建一个时间跟踪的单页应用

    这篇文章主要介绍了使用Vue.js创建一个时间跟踪的单页应用的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • Vue项目安装插件并保存

    Vue项目安装插件并保存

    今天小编就为大家分享一篇关于Vue项目安装插件并保存,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 在Vue项目中引入Echarts绘制K线图的方法技巧

    在Vue项目中引入Echarts绘制K线图的方法技巧

    在Vue项目开发中,数据可视化是一项重要的任务,Echarts是一个由百度开源的数据可视化库,提供了丰富的图表类型和强大的交互功能,其中,K线图常用于展示金融数据的走势,本文将详细介绍如何在Vue项目中引入Echarts并绘制K线图,需要的朋友可以参考下
    2025-04-04
  • Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    这几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法
    2020-01-01
  • Element-plus使用中遇到的问题小结

    Element-plus使用中遇到的问题小结

    表格数据是websocket通信获取的数据,首次获取20条数据,以后新增订阅获取一条,新增一条则向上滑动显示最新数据,本文给大家介绍Element-plus使用中遇到的问题小结,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • Vue手写dialog组件模态框过程详解

    Vue手写dialog组件模态框过程详解

    这篇文章主要介绍了Vue手写dialog组件模态框过程,dialog组件为模态框,因此应该是固定定位到页面上面的,并且需要留一定的插槽来让使用者自定义显示内容
    2023-02-02
  • Vue深入理解插槽slot的使用

    Vue深入理解插槽slot的使用

    最近被问起是否了解vue的插槽(slot),咋一想发现,似乎很少用到这玩意。所以整理了下slot的一些用法
    2022-08-08
  • 分分钟玩转Vue.js组件

    分分钟玩转Vue.js组件

    这篇文章教大家如何分分钟玩转Vue.js组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue-upload上传图片详细使用方法

    vue-upload上传图片详细使用方法

    这篇文章主要介绍了使用vue-upload上传图片的详细使用说明,文中有相关的代码示例供大家参考,感兴趣的小伙伴一起跟着小编来学习吧
    2023-05-05

最新评论