Vue項目設置多個靜態(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中引入相關插件和配置,可以輕松實現(xiàn)自定義靜態(tài)文件目錄,希望這些內容對您有所幫助,感興趣的朋友一起看看吧

Vite實現(xiàn)方案

安裝插件

npm i vite-plugin-static-copy

在vite.config.ts引入

import { viteStaticCopy } from 'vite-plugin-static-copy'

配置

    plugins: [
        viteStaticCopy({
            targets: [
                {
                    src: "要設置的靜態(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/'),   // 目標文件夾
        }, 
      ]}),
    ],
  },

到此這篇關于Vue項目如何設置多個靜態(tài)文件；如何自定義靜態(tài)文件目錄的文章就介紹到這了,更多相關Vue項目靜態(tài)文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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