Vue項(xiàng)目設(shè)置多個(gè)靜態(tài)文件及自定義靜態(tài)文件目錄的方案詳解
更新時(shí)間：2025年01月03日 09:43:06 作者：Web_Lys
本文介紹了如何在Vue項(xiàng)目中配置多個(gè)靜態(tài)文件目錄,并提供了使用Vite和Webpack實(shí)現(xiàn)的示例,通過(guò)在vite.config.ts或vue.config.js中引入相關(guān)插件和配置,可以輕松實(shí)現(xiàn)自定義靜態(tài)文件目錄,希望這些內(nèi)容對(duì)您有所幫助,感興趣的朋友一起看看吧
Vite實(shí)現(xiàn)方案
安裝插件
npm i vite-plugin-static-copy
在vite.config.ts引入
import { viteStaticCopy } from 'vite-plugin-static-copy'配置
plugins: [
viteStaticCopy({
targets: [
{
src: "要設(shè)置的靜態(tài)文件目錄的相對(duì)路徑 相對(duì)于vite.config.ts的",
dest: './', // 不用動(dòng)
},
],
}),
],打包嘗試
Webpack實(shí)現(xiàn)方案
使用 插件
npm i copy-webpack-plugin
vue.config.js 引入
const CopyWebpackPlugin = require('copy-webpack-plugin');
configureWebpack: {
plugins: [
new CopyWebpackPlugin({patterns:[
{
from: path.resolve(__dirname, '../static'), // 要復(fù)制的文件夾
to: path.resolve(__dirname, 'dist/'), // 目標(biāo)文件夾
},
]}),
],
},到此這篇關(guān)于Vue項(xiàng)目如何設(shè)置多個(gè)靜態(tài)文件；如何自定義靜態(tài)文件目錄的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目靜態(tài)文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3之defineProps、defineEmits和defineExpose的使用及說(shuō)明
文章介紹了Vue中defineProps、defineEmits和defineExpose的用途和作用,defineProps用于在子組件中定義類(lèi)型安全的props,defineEmits允許子組件向父組件傳遞事件2025-10-10
vue如何使用async、await實(shí)現(xiàn)同步請(qǐng)求
這篇文章主要介紹了vue如何使用async、await實(shí)現(xiàn)同步請(qǐng)求,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue 中可以定義組件模版的幾種方式以及他們之間的一些差別，需要的朋友可以參考下2019-08-08
Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮
這篇文章主要為大家詳細(xì)介紹了Vue+Element-UI實(shí)現(xiàn)上傳圖片并壓縮功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入
這篇文章主要給大家介紹了關(guān)于vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入的相關(guān)資料,element-plus正是element-ui針對(duì)于vue3開(kāi)發(fā)的一個(gè)UI組件庫(kù),?它的使用方式和很多其他的組件庫(kù)是一樣的,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue之父子組件傳值，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue用遞歸組件寫(xiě)樹(shù)形控件的實(shí)例代碼
最近在vue項(xiàng)目中遇到需要用樹(shù)形控件的部分，比如導(dǎo)航目錄是不確定的，所以必須要用樹(shù)形結(jié)構(gòu)，下面腳本之家小編給大家?guī)?lái)了vue用遞歸組件寫(xiě)樹(shù)形控件的實(shí)例代碼，需要的朋友參考下吧2018-07-07
平時(shí)在獲取真實(shí)DOM的時(shí)候獲取不到最新的DOM元素，使用$nextTick就可以，那為什么$nextTick就可以獲取到最新的DOM元素呢，本文就來(lái)帶著這兩個(gè)問(wèn)題來(lái)解析一下nextTick的原理2023-05-05
Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過(guò)簡(jiǎn)單定義或?qū)ο蠖x,開(kāi)發(fā)者可以靈活地接收并處理組件上的屬性值,簡(jiǎn)單定義方式通過(guò)數(shù)組傳遞屬性名,而對(duì)象定義則可以約束屬性的數(shù)據(jù)類(lèi)型、默認(rèn)值及是否必須傳遞等2024-09-09