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

目录
  • vite.config.ts文件的配置
    • 1、alias配置别名
    • 2、关于path的引入
  • vite项目在jenkins自动打包报错
    • 2种解决方案

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目录下即可

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 一个基于vue3+ts+vite项目搭建初探

    一个基于vue3+ts+vite项目搭建初探

    目录 前言 环境准备 使用Vite快捷搭建 使用npm 使用yarn 安装依赖 启动项目 修改vite配置文件 找到根目录vite.config.ts文件打开 集成路由 集成Vuex 添加element ui 集成axios 集成Sass Vue3 使用 总结 前言 基于Vue3已经成为默认版本,目前的项目暂时还没有使用过vue3开发和最近有一个全新的新项目的基础下,使用vue3开发项目,必然是未来的一个趋势 下面记录一下怎么使用Vue3 + ts + vite 从0开始搭建一个项目 环境准备

  • 一步步带你用vite简单搭建ts+vue3全家桶

    一步步带你用vite简单搭建ts+vue3全家桶

    目录 一.vite环境搭建,构建vite-vue-ts项目 1.安装vite环境 2.使用vite初始化vite+vue+ts的项目 3.选择项目类型为vue+ts 二.项目配置 1.vue-router 配置 2.vuex 配置 3.vite.config.ts 配置 总结 一.vite环境搭建,构建vite-vue-ts项目 1.安装vite环境 npm init @vitejs/app 或者 yarn create @vitejs/app 2.使用vite初始化vite+vue+ts的项目

  • 从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    目录 项目初始化 安装router和pinia 安装ESlint eslint的vue规则需要切换 安装prettier 安装stylelint 安装husky 安装commitlint 总结 参考: 最近时间总算是闲了下来,准备着手搭建一个基础模板,为后面新项目准备的,搭建过程中遇到不少问题,现在总结下来给大家使用. 项目初始化 本项目已vite开始,所以按照vite官方的命令开始.这里使用的命令行的方式来搭建基础项目: yarn create vite my-vue-app --templa

  • 一文教会你搭建vite项目并配置路由和element-plus

    一文教会你搭建vite项目并配置路由和element-plus

    目录 1.创建项目 2.安装vite 3.启动项目 4.可在vite.config.ts文件下修改端口号,默认为3030,我们可以改成习惯用的8080 5.安装路由router和element-plus 6.在src目录下新建views和router文件夹,然后在router目录下新建index.ts文件,在index.ts文件下配置路由 6.然后在main.ts中引入 7.使用element-plus 8.在App.vue中编写样式 附:vite引入element-plus修改主题色报错 总结

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

    目录 vite.config.ts文件的配置 1.alias配置别名 2.关于path的引入 vite项目在jenkins自动打包报错 2种解决方案 vite.config.ts文件的配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig(

  • 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/

  • spring、mybatis 配置方式详解(常用两种方式)

    spring、mybatis 配置方式详解(常用两种方式)

    在之前的文章中总结了三种方式,但是有两种是注解sql的,这种方式比较混乱所以大家不怎么使用,下面总结一下常用的两种总结方式: 一. 动态代理实现 不用写dao的实现类 这种方式比较简单,不用实现dao层,只需要定义接口就可以了,这里只是为了记录配置文件所以程序写的很简单: 1.整体结构图: 2.三个配置文件以及一个映射文件 (1).程序入口以及前端控制器配置 web.xml <?xml version="1.0" encoding="UTF-8"?> &

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

    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

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

    解决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项目中企业微信使用js-sdk时config和agentConfig配置方式详解

    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命令引入

  • Spring-cloud Config Server的3种配置方式

    Spring-cloud Config Server的3种配置方式

    目录 Spring-cloud Config Server的3种配置 1.config 默认Git加载 2.加载本地开发环境 3.加载 本地物理环境 4.加载svn环境 springcloud统一配置中心(config server 端) 1.为什么要使用统一配置中心? 2.登陆github 创建一个用于存放配置的项目 3.存放配置的项目的git地址 配置到项目的yml中 4.项目中的配置(Spring Cloud Config server 端) 5.再git上创建文件夹 用来存放配置信息 6

  • CONFIG.SYS文件的命令与配置

    CONFIG.SYS是DOS系统中的一个重要文件,它的配置直接影响到系统的使用及其效率.如果配置不当的话,可能很多程序都无法正常运行.因此,正确 合理地配置CONFIG.SYS文件是十分必要和重要的.下面我向大家介绍一下CONFIG.SYS中的命令及其配置方法. CONFIG.SYS中的命令:  注意:所有以HIGH结尾的命令(如DEVICEHIGH)表示将其调入UMB(上位内存),但有些这样的命令(如FILESHIGH)必须在MS-DOS 7.x版本中使用. ACCDATE :指定对每一个驱动

  • SpringMVC xml文件路径在web.xml中的配置方式

    SpringMVC xml文件路径在web.xml中的配置方式

    目录 SpringMVC xml文件路径在web.xml中的配置 SpringMVC 修改配置文件路径 1.1.Classpath 1.2.Classpath* 1.3.Classpath是什么 1.4.Classpath和classpath*的区别 SpringMVC xml文件路径在web.xml中的配置 正常情况下springmvc的xml文件应放在WEB-INF下,命名规则为[name]-servlet.xml, "-servlet"这个字段是必不可少的 [name]你可以随便

随机推荐