vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法

目前 vue-cli已经发布5.0了，webpack 配置上也与之前老版本的有所不同，调整 webpack 配置最简单的方式就是在 vue.config.js 中的对象中进行配置，该对象将会被 webpack-merge 合并入最终的 webpack 配置。

有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

vue-cli参考文档：vue-cli 文档指南

碰巧项目中打包的时候要复制一个文件夹及其下面的文件到打包文件夹 dist 下，下意识的就想起来copy-webpack-plugin这个插件，但是以前都是直接在 webpack的配置文件中直接配置，但现在 vue-cli5，在项目中找不到这个文件了，那该如何配置呢。

今天就好好说说vue-cli5.0种使用copy-webpack-plugin插件该如何配置的问题。这里我们安装的 copy-webpack-plugin 的版本是 ^11.0.0

安装 copy-webpack-plugin :

yarn add copy-webpack-plugin -D

根据官网说明，配置文件从之前的 webpack 配置文件，改成了在 vue.config.js 中进行配置，将 vue.config.js 中项目生成的内容注释掉，改成以下代码片段改写就可以使用了。这里我们是将根目录下的 static 文件复制到 打包生成的 dist 目录下。

注意这里，如果使用to参数的话 默认是dist目录下进行复制, 所填字段为目路地址

// 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')
          }
        ]
      }
    ]);
  }
};

这里做下记录，方便有需要的小伙伴取用~

到此这篇关于vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的文章就介绍到这了,更多相关vue  copy-webpack-plugin 打包复制文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 简述vue-cli中chainWebpack的使用方法

    前言 在项目开发中我们难免碰到需要对webpack配置更改的情况,今天就主要来讲一下在vue.config.js中对一些配置的更改,简单介绍一下loader的使用:用configureWebpack简单的配置:用chainWebpack做高级配置:包括对loader的添加,修改:以及插件的配置 1.首先简单介绍一下webpack中loader的简单使用: loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容,在你打包的时候对某些内容需要loa

  • 解决vue-cli项目webpack打包后iconfont文件路径的问题

    在使用vue-cli创建vue项目时,可以自动生成webpack文件.使用 npm run build 即可打包发布生产文件,打包后的文件 webpack配置 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.hash.css文件中. 但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题. 解决方法: 在build/utils文件中的下图所示位置添加../../

  • 解决vue-cli webpack打包后加载资源的路径问题

    vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯的在背景图使用相对路径导致加

  • vue-cli与webpack处理静态资源的方法及webpack打包的坑

    通过Vue-cli进行webpack打包的坑 Vue-cli为Vue项目搭建的脚手架的确很方便,但打包时容易出现空白页,或者对应的静态资源加载不了. 我是通过将项目/config下的index.js的assetsPublicPath变成'./',变成相对路径,进行解决. cd vue demo npm run dev //运行程序 npm run bulid //webpack打包 处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/a

  • 解决vue-cli webpack打包开启Gzip 报错问题

    前两天项目上线,用vue-cli npm run build命令打包,打包完成后我擦吓了一跳,15M.本来暂时不打算优化的,但是每次看着部署包这么大,想想还是先优化一下,让包好看点,免得以后出现心理阴影! 在把 map文件干掉后,发现webpack这打包的速度,也忒感人了.在进行不自动生成 map文件设置时,有看到webpack自带的productionGzip功能,索性就一次性一起鼓捣鼓捣. 下面是瞎鼓捣历程,差点就鼓捣不出来了. 1.在项目 根目录config/index.js中build内

  • vue 路由懒加载中给 Webpack Chunks 命名的方法

    最早的路由定义方式 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' import Login from '../views/Login.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', compo

  • 深入理解基于vue-cli的webpack打包优化实践及探索

    转眼已经是2019年,短短三四年时间,webpack打包工具成为了前端开发中必备工具,曾经一度的面试题都是问,请问前端页面优化的方式有哪些?大家也是能够信手拈来的说出缓存.压缩文件.CSS雪碧图以及部署CDN等等各种方法,但是今天不一样了,可能你去面试问的就是,请问你是否知道webpack的打包原理,webpack的打包优化方法有哪些?所以该说不说的,笔者闲着没事研究了一下webpack的打包优化,可能大家都有看过类似的优化文章~ 但是笔者还是希望能够给大家一些新的启发~ 1.准备工作:测速与分

  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装

  • vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法

    vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法

    目前 vue-cli已经发布5.0了,webpack 配置上也与之前老版本的有所不同,调整 webpack 配置最简单的方式就是在 vue.config.js 中的对象中进行配置,该对象将会被 webpack-merge 合并入最终的 webpack 配置. 有些 webpack 选项是基于 vue.config.js 中的值设置的,所以不能直接修改.例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path:你应该修改 vue.config.j

  • AndroidStduio3.0 使用gradle将module打包jar文件的方法

    AndroidStduio3.0使用gradle将module打包jar文件,首先需要安装gradle. 打开控制台输入      open -e .bash_profile     命令,就可以打开配置文件的文本,在里面添加 然后进行保存.在输入  source .bash_profile  命令保存你的设置. 在控制台输入    gradle -version  命令来判断你的安装gradle是否成功 当返回这样的时候就可以判断安装gradle成功. gradle安装成功之后在module模

  • php不使用copy()函数复制文件的方法

    本文实例讲述了php不使用copy()函数复制文件的方法.分享给大家供大家参考.具体如下: 下面的代码不使用php内置的copy函数,直接通过文件读取写入的操作方式复制文件 <?php function copyfiles($file1,$file2){ $contentx =@file_get_contents($file1); $openedfile = fopen($file2, "w"); fwrite($openedfile, $contentx); fclose($o

  • 在vue.js中使用JSZip实现在前端解压文件的方法

    1. 在vue文件的html中引入element的上传控件,代码如下: <div> <el-upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBefore"> <el-button size="small" type="primary">点击上传</el-button> <

  • Webpack中loader打包各种文件的方法实例

    前言 使用webpack时,在main.js文件中直接使用如下代码导入了style.css文件,控制台中显示如下错误:You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. import './css/style.css'; 原因是,webpack中默认只能打包.js类型文件,无法打包其他类型文件.如果要打包非.js

  • Webpack按需加载打包chunk命名的方法

    前言 最近,遇到复杂h5页面开发,为了优化H5首屏加载速度,想到使用按需加载的方式,减少首次加载的JavaScript文件体积,于是将处理过程在这里记录一下,涉及到的主要是以下三点: 使用Webpack如何做按需加载 filename和chunkFilename的区别 如何命名chunk的名称(webpackChunkName) 1 使用Webpack如何做按需加载 大家都知道Webpack是现在流行的前端打包编译工具,通过模块之间的依赖关系,将代码打包组织到一起.Webpack目前已经到v4.

  • webpack打包多页面的方法

    前言 一开始接触webpack是因为使用Vue的关系,因为Vue的脚手架就是使用webpack构建的.刚开始的时候觉得webpack就是为了打包单页面而生的,后来想想,这么好的打包方案,只在单页面上使用是否太浪费资源了呢?如果能在传统多页面上使用webpack,开始效率是否会事半功倍呢?好在众多优秀的前端开发者已经写了许多demo和文章供人学习.我也写了一个小项目,希望对大家学习webpack有帮助. 好吧其实上面说的都是废话,接下来附上项目地址和干货,配合食用更佳. webpack-multi

  • Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

  • Vue webpack 项目自动打包压缩成zip文件的方法

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了.所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事! 1.插件装备 webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建. 安装: npm i

  • vue按需加载组件webpack require.ensure的方法

    vue-cli是由vue官方发布的快速构建vue单页面的脚手架. 使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/c

随机推荐