首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在vitejs配置文件中添加公共目录

在vitejs配置文件中添加公共目录可以通过配置build.publicDir属性来实现。具体步骤如下:

  1. 在项目根目录下找到 vite.config.js 或者 vite.config.ts 文件,如果没有,则创建一个该文件。
  2. 打开 vite.config.js 或者 vite.config.ts 文件,并添加以下代码:
代码语言:txt
复制
// vite.config.js
export default {
  build: {
    publicDir: 'public'
  }
}

或者

代码语言:txt
复制
// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    publicDir: 'public'
  }
})
  1. 将上述代码中的 public 替换为你想要设置的公共目录名称,此处假设为 public
  2. 保存配置文件,重新启动 Vite 开发服务器。

经过以上步骤,Vite 将会根据配置,在项目根目录下创建一个名为 public 的目录,你可以在该目录下放置一些公共资源文件,例如图片、字体等。这些文件会被 Vite 构建时自动拷贝到输出目录中,并通过对应的 URL 地址进行访问。

这样做的好处是可以统一管理项目中的公共资源文件,并且可以在项目中直接使用相对路径来引用这些资源,而不需要关心资源文件的具体位置。

推荐的腾讯云相关产品:腾讯云对象存储(COS)

腾讯云对象存储(COS)是一种安全、高可用、低成本的云端存储服务,适用于存储和处理任意类型的文件,包括文本、图片、音视频等。COS 提供了强大的 API 接口和 SDK 工具,方便开发者在各种应用场景中使用。

产品介绍链接地址:腾讯云对象存储(COS)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在keras添加自己的优化器(adam等)

若并非使用默认安装路径,可参照根目录查看找到。 2、找到keras在tensorflow下的根目录 需要特别注意的是找到keras在tensorflow下的根目录而不是找到keras的根目录。...\Anaconda3\envs\tensorflow-gpu\Lib\site-packages\tensorflow\python\keras 3、找到keras目录下的optimizers.py文件并添加自己的优化器...找到optimizers.py的adam等优化器类并在后面添加自己的优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己的优化器...(adam等)就是小编分享给大家的全部内容了,希望能给大家一个参考。

45K30
  • 【Vue3】用Element Plus实现列表界面

    文章目录 前言 效果图 目录简介 修改vite配置文件 Element Plus简介 Element Plus安装和引用 table完成列表界面 运行vue项目 总结 ---- 前言 哈喽大家好,本期我们用...:vscode的配置文件 node_modules:执行npm时初始化的包文件 public:存放公共资源 src:存放静态资源,重要文件 components:组件文件夹 App.vue:根组件 main.js...打开vite.config.js文件添加server,将open属性设置为true,host设置ip,port设置端口。...// vite配置文件 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev...在第一个el-col标签添加el-input组件,为搜索框。在第二个el-col标签添加两个el-button组件,表示查询和新增按钮,并使用@click添加点击事件。

    2.8K00

    一个基于vite构建的vue3+pinia+ts+elementUI plus的初始化开箱即用的项目模版

    什么是Vite 这里借用官方的介绍: 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,速度快到惊人的 模块热更新(HMR)。...# 入口文件 │ │ ├─assets # 资源文件目录 │ │ │ logo.png │ │ │ │ │ └─components # 组件文件目录 │ │...`declare module 'nprogress' yarn add @types/nprogress --dev 实际使用可以根据项目修改,比如RESTful api可以自行添加put和delete...error: AxiosError) => { // 接收到异常响应的处理开始 if (error && error.response) { // 1.公共错误处理...# 安装 yarn add --dev vite-plugin-compression plugins 添加: import viteCompression from 'vite-plugin-compression

    77460

    打造运维开发管理系统:Vue3 + Vite 构建

    上一篇也提到了我们开源项目的需求,第一步项目需求确定后那么就开始我们的下一步计划。 第二步:架构的设计 怎么个架构设计,就是对技术架构、业务架构的设计。.../ 至于为什么使用vite,个人简单理解就一个字“快”,具体的原因参考官网为什么选vite地址: https://cn.vitejs.dev/guide/why.html 这里比较下webpack和vite.../a-button> export default { name: 'App' } 4、.配置按需导入: 在vite.config.js添加...│ └── vite # vite配置 ├── mock # mock文件夹 ├── public # 公共静态资源目录 ├── src # 主目录 │ ├── api # 接口文件 │ ├──...icon sprite 图标文件夹 │ │ ├── images # 项目存放图片的文件夹 │ │ └── svg # 项目存放svg图片的文件夹 │ ├── components # 公共组件

    52020

    一文详解新一代高效前端构建工具VITE-达观数据

    Vite 的配置文件是一个 JavaScript 模块,允许开发者自定义构建和部署的方式,同时也提供了一些默认配置选项,端口号、代理、压缩等。...03支持多种前端框架和语言Vite 不仅支持常见的前端框架 Vue、React 和 Angular 等,还支持多种前端语言, TypeScript、CoffeeScript 和 Sass 等。...03启动开发服务器进入项目目录并启动开发服务器:这将会启动一个本地服务器,并自动打开浏览器进入开发模式。04构建项目使用 Vite 构建项目:这将会构建项目并生成静态文件,可以直接部署到生产环境。...以下是一个简单的配置示例:在此配置文件,我们导入了 @vitejs/plugin-vue 插件,用于支持 Vue.js。此外,我们还配置了别名、构建输出目录、资源目录、源映射和开发服务器的选项。...支持插件vite-plugin-windicss:用于支持 Windi CSS 的插件vite-plugin-svg-icons:用于按需引入 SVG 图标的插件要使用 Vite 插件,只需将插件导入配置文件添加

    22420

    新型前端构建工具 Vitejs 开发使用

    新型前端构建工具 Vitejs 开发使用 在我刚接触编程的时候,JavaScript 只是被用来给网站添加一些交互效果。你还记得如何添加鼠标拖拽效果吗?或者如何在鼠标悬停时改变链接颜色?...你可能要注意的 ViteJS 功能特性: 构建时考虑到了处理时效 。ViteJS 所做的少量依赖和转码工作,都是使用 esbuild 来完成的,而 esbuild 是建立在 Go 的。...虽然它不执行类型检查,但通常你的 IDE 会处理这个问题,你甚至可以在构建脚本添加一个快速的单行代码来为你做这件事(快速的 tsc --noEmit )。 它支持热模块替换(HMR) 。...ViteJS 内置插件系统 ViteJS 的主要优势之一是它内置了一个插件系统,这意味着社区可以(并且已经)给其他框架( React 和 Vue)添加额外的功能和插件。...ViteJS 和其他构建工具( Webpack)的主要区别在于,后者会尝试通过你的依赖树,编译和优化打包后的代码,以更好地让任何浏览器获取你的代码。

    1.2K30

    从 0 开始手把手带你搭建一套规范的 Vue3.x 工程化项目

    // 通用类库目录 ├── components/ // 公共组件目录 ├── router/ // 路由配置目录...安装 eslint-plugin-jest npm i eslint-plugin-jest -D 添加 eslint-plugin-jest 到 ESLint 配置文件 .eslintrc.js ...image 执行单元测试 在根目录下 package.json 文件的 scripts 添加一条单元测试命令:"test": "jest"。 ?...你可以在 jest.config.js 配置文件,自由配置单元测试文件的目录。 单元测试全部通过时的终端显示信息 ? 单元测试未全部通过时的终端显示信息 ?...image 新创建的 secret VUE3_DEPLOY 在 Actions 配置文件要用到,两个地方需保持一致! 创建 Actions 配置文件 在项目根目录下创建 .github 目录

    6.3K62
    领券