欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli5.0?webpack?采用?copy-webpack-plugin?打包復(fù)制文件的方法

 更新時間:2022年06月22日 09:42:27   作者:Gaby  
今天就好好說說vue-cli5.0種使用copy-webpack-plugin插件該如何配置的問題。這里我們安裝的 copy-webpack-plugin 的版本是 ^11.0.0,感興趣的朋友一起看看吧

目前 vue-cli已經(jīng)發(fā)布5.0了,webpack 配置上也與之前老版本的有所不同,調(diào)整 webpack 配置最簡單的方式就是在 vue.config.js 中的對象中進行配置,該對象將會被 webpack-merge 合并入最終的 webpack 配置。

有些 webpack 選項是基于 vue.config.js 中的值設(shè)置的,所以不能直接修改。例如你應(yīng)該修改 vue.config.js 中的 outputDir 選項而不是修改 output.path;你應(yīng)該修改 vue.config.js 中的 publicPath 選項而不是修改 output.publicPath。這樣做是因為 vue.config.js 中的值會被用在配置里的多個地方,以確保所有的部分都能正常工作在一起。

vue-cli參考文檔:vue-cli 文檔指南

碰巧項目中打包的時候要復(fù)制一個文件夾及其下面的文件到打包文件夾 dist 下,下意識的就想起來copy-webpack-plugin這個插件,但是以前都是直接在 webpack的配置文件中直接配置,但現(xiàn)在 vue-cli5,在項目中找不到這個文件了,那該如何配置呢。

今天就好好說說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 中進行配置,將 vue.config.js 中項目生成的內(nèi)容注釋掉,改成以下代碼片段改寫就可以使用了。這里我們是將根目錄下的 static 文件復(fù)制到 打包生成的 dist 目錄下。

注意這里,如果使用to參數(shù)的話 默認是dist目錄下進行復(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解Vue.js搭建路由報錯 router.map is not a function

    詳解Vue.js搭建路由報錯 router.map is not a function

    這篇文章主要介紹了詳解Vue.js搭建路由報錯 router.map is not a function,非常具有實用價值,需要的朋友可以參考下
    2017-06-06
  • Vue生命周期與setup深入詳解

    Vue生命周期與setup深入詳解

    Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期
    2022-09-09
  • vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面

    vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面

    這篇文章主要介紹了vue如何將導(dǎo)航欄、頂部欄設(shè)置為公共頁面問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • 在vue項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決

    在vue項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決

    這篇文章主要介紹了在vue項目中使用axios發(fā)送post請求出現(xiàn)400錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vuex中g(shù)etters的基本用法解讀

    vuex中g(shù)etters的基本用法解讀

    這篇文章主要介紹了vuex中g(shù)etters的基本用法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 解讀vue頁面監(jiān)聽store值改變問題

    解讀vue頁面監(jiān)聽store值改變問題

    這篇文章主要介紹了解讀vue頁面監(jiān)聽store值改變問題,具有很好的參考價值,希望對大家有所幫助。
    2022-10-10
  • VueJS設(shè)計與實現(xiàn)之淺響應(yīng)與深響應(yīng)詳解

    VueJS設(shè)計與實現(xiàn)之淺響應(yīng)與深響應(yīng)詳解

    這篇文章主要為大家介紹了VueJS設(shè)計與實現(xiàn)之淺響應(yīng)與深響應(yīng)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • vue組件中使用iframe元素的示例代碼

    vue組件中使用iframe元素的示例代碼

    本篇文章主要介紹了vue組件中使用iframe元素的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • ResizeObserver?loop?limit?exceeded報錯原因及解決方案

    ResizeObserver?loop?limit?exceeded報錯原因及解決方案

    這篇文章主要給大家介紹了關(guān)于ResizeObserver?loop?limit?exceeded報錯原因及解決的相關(guān)資料,公司項目監(jiān)聽系統(tǒng)中發(fā)現(xiàn)一個高頻錯誤ResizeObserver loop limit exceeded,而瀏覽器的console中卻沒有提示,需要的朋友可以參考下
    2023-09-09
  • vue路由切換之淡入淡出的簡單實現(xiàn)

    vue路由切換之淡入淡出的簡單實現(xiàn)

    今天小編就為大家分享一篇vue路由切換之淡入淡出的簡單實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10

最新評論