vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）

最新推荐文章于 2024-06-13 10:29:49 发布
最新推荐文章于 2024-06-13 10:29:49 发布
阅读量7.4k 收藏 5
点赞数 3
分类专栏： vue 文章标签： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43369521/article/details/82987038
版权

vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）

场景

业务要求能够直接通过 “域名+/file”的方式访问静态资源的html，然而产品绝对static暴露在url中不好看又不能直接将html放在static中。所以想到了既然static可以直接访问，那么给他新加几个文件目录应该不是问题。

重点

在webpack.dev.conf.js和webpack.prod.conf.js两个文件中，都有这样一段配置代码：

    // copy custom static assets
    new CopyWebpackPlugin([
      {
   
        from: path.resolve(__dirname, '../static')<
最低0.47元/天 解锁文章
一尾小锦鲤丶
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue CLI4.x如何打包到指定文件夹，及静态资源打包到static文件夹
江小鱼的博客
05-08 6862
被这个问题所困，闲着没事想着看看文档。。。顿时恍然大悟   可以使用vue.config.js配置大多数你可能会用到的配置。建议直接参考官方文档/(ㄒoㄒ)/~~。   附上Vue CLI配置参考地址https://cli.vuejs.org/zh/config/ 注意 好了，下面进入正题。   这是我暂时用到的一些配置 module.exports = { //基本路径 public...
vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）...
weixin_33670786的博客
12-14 580
场景 业务要求能够直接通过 “域名+/file”的方式访问静态资源的html，然而产品绝对static暴露在url中不好看又不能直接将html放在static中。所以想到了既然static可以直接访问，那么给他新加几个文件目录应该不是问题。 重点 在webpack.dev.conf.js和webpack.prod.conf.js两个文件中，都有这样一段配置代码： // copy custom st...
webpack处理vue项目静态资源及public/static/assets目录的区别
最新发布
jsPao的博客
06-13 452
Vue 静态资源可以通过两种方式进行处理：1、在 JavaScript 被导入或在 template/CSS 中通过被引用。这类引用。2、放置在public目录下或。这类资源将会，而。在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴，而进入index.js后，加载的组件中的require都属于webpack的解析范畴。
vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
04-01 4642
vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath
[vue]build打包后将静态文件放入指定文件夹
wyy7293的博客
08-24 2408
vue build打包后将静态文件放入指定文件夹 最终效果 解决方案 在vue.config.js 添加 assetsDir module.exports = { assetsDir: 'index' }
vue项目打包时如何将静态文件打包到一个单独的文件夹
phplife的电子商务网上商城专栏
09-17 2638
vue项目打包时如何将静态文件打包到一个单独的文件夹
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
通过Vue-cli进行webpack打包的坑 ...你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什么呢？本文主要和大家介绍了vue-cli与
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际的项目开发过程中，可能会遇到一些问题，比如在本例中提到的`iconfont`图标...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page 命令 以下是此插件的 3 个命令： init-...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多现有的vue-cli...
vue 项目引用static目录资源_vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）...
weixin_39756416的博客
12-21 579
场景业务要求能够直接通过 “域名+/file”的方式访问静态资源的html，然而产品绝对static暴露在url中不好看又不能直接将html放在static中。所以想到了既然static可以直接访问，那么给他新加几个文件目录应该不是问题。重点在webpack.dev.conf.js和webpack.prod.conf.js两个文件中，都有这样一段配置代码：// copy custom static...
vuecli4配置vue.config.js
weixin_42125737的博客
02-18 4161
constCopyWebpackPlugin=require('copy-webpack-plugin'); constHtmlWebpackPlugin=require('html-webpack-plugin') constpath=require('path'); console.log(1111111111111,process.env.NODE_ENV) mo...
vue-cli 打包 使用CopyWebpackPlugin直接复制文件
热门推荐
lczc_c的博客
08-01 1万+
CopyWebpackPlugin复制一个静态文件到打包后的路径 在默认情况向使用vue-cli脚手架开发的时候我们一般需要自己配置webpack，当我们想要打包一个项目的时候直接运行npm run build就能在我们指定好输出的路径中找到我们打包后的文件。 let path = require('path') function resolve(dir) { return path.jo...
vue-cli使用CopyWebpackPlugin将指定文件复制到打包后的dist目录下
zhaoyan_love的博客
10-30 3748
由于小编在网上查到好多类似的文章，但是都是一样的内容，而且还不好使，所以在自己琢磨完后，成功复制文件，来此写文章，防止大家入坑 步骤一（引入插件） 在vue.config.js中引入插件 const CopyWebpackPlugin = require('copy-webpack-plugin'); 步骤二（使用插件） 在module.exports ={}中引入插件 configureWebpack: { plugins: [ new CopyWebpackPl
vue系列（2）：vuecli4+Cesium开发环境配置
碰碰的博客
10-25 1280
版本：vuecli4.5.7、Cesium1.69 vue.config.js配置： const CopyWebpackPlugin = require("copy-webpack-plugin"); const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ //copy-webpack-plugin 6.x 的写法 // new Copy..
vue打包后static中的文件未打包进去
qq_37176498的博客
08-20 4041
在vue中未使用到的静态资源文件，例如：引用在index.html的js的（此处不知为何，vue打包认为其为未引用），后端返回才引用到的图片等文件。 目前只涉及到此两类，后续再补充。 打包时static中的文件不会一起拷贝到dist的static中。 使用webpack中打包拷贝静态文件CopyWebpackPlugin插件 copyWebpackPlugin： 　　作用：用于webpack打包时拷贝文件的插件包 　　安装：npm installcopyWebpackPlugin@版本号 　.
关于vue中vue.config.js配置中的copy-webpack-plugin的作用于配置要求
qq_46160082的博客
02-02 4175
①优秀文章 关于 copy-webpack-plugin 的用处和使用_JDDDDDDyaya的博客-CSDN博客_copyplugin ②简要概括 在项目运行或打包上线（代码混合混淆压缩成bundle.js）的过程中,最后依赖文件的位置发生变化，那么需要将文件进行移动。 copy-webpack-plugin插件就是代替人工做好这件事情 plugins: [ new CopyWebpackPlugin([ {

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值