vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法
目前 vue-cli已經(jīng)發(fā)布5.0了,webpack 配置上也與之前老版本的有所不同,調(diào)整 webpack 配置最簡單的方式就是在 vue.config.js
中的對(duì)象中進(jìn)行配置,該對(duì)象將會(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解Vue.js搭建路由報(bào)錯(cuò) router.map is not a function
這篇文章主要介紹了詳解Vue.js搭建路由報(bào)錯(cuò) router.map is not a function,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面
這篇文章主要介紹了vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01在vue項(xiàng)目中使用axios發(fā)送post請(qǐng)求出現(xiàn)400錯(cuò)誤的解決
這篇文章主要介紹了在vue項(xiàng)目中使用axios發(fā)送post請(qǐng)求出現(xiàn)400錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09VueJS設(shè)計(jì)與實(shí)現(xiàn)之淺響應(yīng)與深響應(yīng)詳解
這篇文章主要為大家介紹了VueJS設(shè)計(jì)與實(shí)現(xiàn)之淺響應(yīng)與深響應(yīng)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決方案
這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報(bào)錯(cuò)原因及解決的相關(guān)資料,公司項(xiàng)目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個(gè)高頻錯(cuò)誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下2023-09-09