vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
目前 vue-cli已經(jīng)發(fā)布5.0了，webpack 配置上也與之前老版本的有所不同，調(diào)整 webpack 配置最簡單的方式就是在 vue.config.js 中的對象中進(jìn)行配置，該對象將會(huì)被 webpack-merge 合并入最終的 webpack 配置。
有些 webpack 選項(xiàng)是基于 vue.config.js 中的值設(shè)置的，所以不能直接修改。例如你應(yīng)該修改 vue.config.js 中的 outputDir 選項(xiàng)而不是修改 output.path；你應(yīng)該修改 vue.config.js 中的 publicPath 選項(xiàng)而不是修改 output.publicPath。這樣做是因?yàn)?nbsp;vue.config.js 中的值會(huì)被用在配置里的多個(gè)地方，以確保所有的部分都能正常工作在一起。
vue-cli參考文檔：vue-cli 文檔指南
碰巧項(xiàng)目中打包的時(shí)候要復(fù)制一個(gè)文件夾及其下面的文件到打包文件夾 dist 下，下意識(shí)的就想起來copy-webpack-plugin這個(gè)插件，但是以前都是直接在 webpack的配置文件中直接配置，但現(xiàn)在 vue-cli5，在項(xiàng)目中找不到這個(gè)文件了，那該如何配置呢。
今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0
安裝 copy-webpack-plugin :
yarn add copy-webpack-plugin -D
根據(jù)官網(wǎng)說明，配置文件從之前的 webpack 配置文件，改成了在 vue.config.js 中進(jìn)行配置，將 vue.config.js 中項(xiàng)目生成的內(nèi)容注釋掉，改成以下代碼片段改寫就可以使用了。這里我們是將根目錄下的 static 文件復(fù)制到 打包生成的 dist 目錄下。
注意這里，如果使用to參數(shù)的話 默認(rèn)是dist目錄下進(jìn)行復(fù)制, 所填字段為目路地址
// const { defineConfig } = require('@vue/cli-service');
// module.exports = defineConfig({
// transpileDependencies: true
// });
const path = require('path');
module.exports = {
chainWebpack: config => {
config.plugin('copy').use(require('copy-webpack-plugin'), [
{
patterns: [
{
from: path.resolve(__dirname, './static'),
to: path.resolve(__dirname, './dist/static')
}
]
}
]);
}
};這里做下記錄，方便有需要的小伙伴取用~
到此這篇關(guān)于vue-cli5.0 webpack 采用 copy-webpack-plugin 打包復(fù)制文件的文章就介紹到這了,更多相關(guān)vue copy-webpack-plugin 打包復(fù)制文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報(bào)錯(cuò)的問題
- html-webpack-plugin修改頁面的title的方法
- 深入webpack打包原理及l(fā)oader和plugin的實(shí)現(xiàn)
- webpack DllPlugin xxx is not defined解決辦法
- 用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法
- vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口
- 詳解node.js中的npm和webpack配置方法
- 如何基于webpack創(chuàng)建plugin并發(fā)布npm包
相關(guān)文章
在Vue項(xiàng)目中集成和使用Lottie動(dòng)畫庫的步驟詳解
Lottie 是一個(gè)由 Airbnb 開源的動(dòng)畫庫,它允許你在 Web、iOS、Android 等平臺(tái)上使用體積小、高性能的體驗(yàn)豐富的矢量動(dòng)畫,本文將詳細(xì)介紹在 Vue 項(xiàng)目中如何集成和使用 Lottie,文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
vue3語法中使用vscode打開滿屏紅線報(bào)錯(cuò)的完美解決方法
這篇文章主要介紹了vue3語法中使用vscode打開滿屏紅線報(bào)錯(cuò)的完美解決方法,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
vue獲取時(shí)間戳轉(zhuǎn)換為日期格式代碼實(shí)例
這篇文章主要介紹了vue獲取時(shí)間戳轉(zhuǎn)換為日期格式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
今天小編就為大家分享一篇vue視頻播放暫停代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue 通過公共字段,拼接兩個(gè)對象數(shù)組的實(shí)例
今天小編就為大家分享一篇Vue 通過公共字段,拼接兩個(gè)對象數(shù)組的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue 實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求
這篇文章主要介紹了vue 如何實(shí)現(xiàn)拖拽動(dòng)態(tài)生成組件的需求，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
Vue3子組件實(shí)現(xiàn)v-model用法的示例代碼
在Vue 3中,實(shí)現(xiàn)自定義的input組件并支持v-model綁定,涉及到對modelValue這個(gè)默認(rèn)prop的處理和對應(yīng)的update:modelValue事件的觸發(fā),本文給大家介紹了Vue3子組件實(shí)現(xiàn)v-model用法的示例,需要的朋友可以參考下2024-04-04
本篇文章主要介紹了vue 2.0 購物車小球拋物線的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了Vue中tab欄切換的簡單實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue表格顯示字符串過長的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10