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)文章
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了一個(gè)手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08
Vue中computed及watch區(qū)別實(shí)例解析
這篇文章主要介紹了Vue中computed及watch區(qū)別實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02
路由是網(wǎng)絡(luò)工程里面的專業(yè)術(shù)語(yǔ)，就是通過(guò)互聯(lián)把信息從源地址傳輸?shù)侥康牡刂返幕顒?dòng)。本質(zhì)上就是一種對(duì)應(yīng)關(guān)系。分為前端路由和后端路由。小編將再下面文章為大家做詳細(xì)介紹，感興趣的小伙伴請(qǐng)和小編一起來(lái)學(xué)習(xí)吧2021-09-09
vant list組件滾動(dòng)保留滾動(dòng)條位置
這篇文章主要介紹了vant list組件滾動(dòng)保留滾動(dòng)條位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Element-ui table中過(guò)濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過(guò)濾條件變更表格內(nèi)容的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級(jí)的操作方法
這篇文章主要介紹了UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級(jí)的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化詳解
這篇文章主要給大家介紹了關(guān)于vue如何監(jiān)聽(tīng)對(duì)象或者數(shù)組某個(gè)屬性的變化,在Vue.js中可以通過(guò)watch監(jiān)聽(tīng)屬性變化并動(dòng)態(tài)修改其他屬性的值,watch通過(guò)監(jiān)聽(tīng)器函數(shù)接收新舊值,實(shí)現(xiàn)屬性間的數(shù)據(jù)聯(lián)動(dòng),需要的朋友可以參考下2024-12-12
淺析Vue中defineProps的解構(gòu)和不解構(gòu)
defineProps?是?Vue?3?Composition?API?中用來(lái)聲明組件接收的?props?的方法,本文主要為大家介紹了defineProps的解構(gòu)和不解構(gòu),感興趣的可以了解下2025-02-02