Vue項目設(shè)置多個靜態(tài)文件及自定義靜態(tài)文件目錄的方案詳解
更新時間：2025年01月03日 09:43:06 作者：Web_Lys
本文介紹了如何在Vue項目中配置多個靜態(tài)文件目錄,并提供了使用Vite和Webpack實現(xiàn)的示例,通過在vite.config.ts或vue.config.js中引入相關(guān)插件和配置,可以輕松實現(xiàn)自定義靜態(tài)文件目錄,希望這些內(nèi)容對您有所幫助,感興趣的朋友一起看看吧
Vite實現(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)文件目錄的相對路徑 相對于vite.config.ts的",
dest: './', // 不用動
},
],
}),
],打包嘗試
Webpack實現(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'), // 要復制的文件夾
to: path.resolve(__dirname, 'dist/'), // 目標文件夾
},
]}),
],
},到此這篇關(guān)于Vue項目如何設(shè)置多個靜態(tài)文件；如何自定義靜態(tài)文件目錄的文章就介紹到這了,更多相關(guān)Vue項目靜態(tài)文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了一個手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue中computed及watch區(qū)別實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02
路由是網(wǎng)絡(luò)工程里面的專業(yè)術(shù)語，就是通過互聯(lián)把信息從源地址傳輸?shù)侥康牡刂返幕顒?。本質(zhì)上就是一種對應(yīng)關(guān)系。分為前端路由和后端路由。小編將再下面文章為大家做詳細介紹，感興趣的小伙伴請和小編一起來學習吧2021-09-09
這篇文章主要介紹了vant list組件滾動保留滾動條位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Element-ui table中過濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過濾條件變更表格內(nèi)容的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
UNIapp實現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法
這篇文章主要介紹了UNIapp實現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化,在Vue.js中可以通過watch監(jiān)聽屬性變化并動態(tài)修改其他屬性的值,watch通過監(jiān)聽器函數(shù)接收新舊值,實現(xiàn)屬性間的數(shù)據(jù)聯(lián)動,需要的朋友可以參考下2024-12-12
淺析Vue中defineProps的解構(gòu)和不解構(gòu)
defineProps?是?Vue?3?Composition?API?中用來聲明組件接收的?props?的方法,本文主要為大家介紹了defineProps的解構(gòu)和不解構(gòu),感興趣的可以了解下2025-02-02