场景

业务要求能够直接通过 “域名+/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'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
// 作用:将static目录拷贝到打包之后的dist文件下

下面就简单了,照葫芦画瓢,配置好你要拷贝的文件目录即可:

// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
},
{
from: path.resolve(__dirname, '../file1'),
to: 'file1',
ignore: ['.*']
},
{
from: path.resolve(__dirname, '../file2'),
to: 'file2',
ignore: ['.*']
}
])

项目目录只需在与static的同级目录新建对应的file1,file2即可,里面可以放任何你想放的东西,且访问时只需使用绝对路径即可

既然这样可行,那么将通过这种方式将静态站点融入到vue项目中也是可行的,当你一个站点上有很多静态页面时,或者是成品非vue项目代码,只需要通过这种方式即可合并到vue项目中,且只需要在url上加上你定义的file即可。

vue-cli项目打包多个与static文件同级的静态资源目录(copy-webpack-plugin插件的使用)的更多相关文章

  1. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  2. vue cli 3 打包过大问题

    vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...

  3. Vue cli项目开启Gzip

    目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...

  4. vue之项目打包部署到服务器

    这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...

  5. Vue Cli 3 打包上线 静态资源404问题解决方案

    报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...

  6. 将vue的项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. ...

  7. @vue/cli 3 打包文件读取绝对路径处理

    @vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...

  8. vue.js项目打包上线

    最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架 ...

  9. 「Vue」vue cli3项目打包为APP方法及坑点

    1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...

随机推荐

  1. centos 安装 Pip 的方法总结

    转自https://blog.csdn.net/u014236259/article/details/75212659 在我们安装Python后,如果未安装包管理工具pip,此时需要自己手动安装: 方 ...

  2. Struts2与easyui分页查询

    easyui里面分页查询:在easyui框架里面已经进行一些分装,所以我们只要进行后台分页查询即可 web.xml和struts.xml文件的配置的就不需要我多说了,和分页前代码一样,不需要更改: 需 ...

  3. UITabBarController的属性

    viewControllers UIViewController的数组,即要显示的VC,数组中VC的顺序即是实际展示的VC的顺序.UITabBarController最多展示5个tab,如果数组中的元 ...

  4. UIButton的探秘

    原文链接 sizeToFit()和sizeThatFits(_:) sizeToFit()会调用sizeThatFits(_:)方法,将现在的frame作为参数.然后根据函数返回的结果更新view. ...

  5. loj6570 毛毛虫计数(生成函数FFT)

    link 巨佬olinr的题解 <-- olinr很强 考虑生成函数 考虑直径上点数>=4的毛毛虫的直径,考虑直径中间那些节点以及他上面挂的那些点的EGF \(A(x)=\sum_{i\g ...

  6. 关于java中String的用法

    在java 中String存在许多的基本函数,接下来了解一下这些函数的基本用法 String.equals用法(这个用法比较难) String类中的equals()方法: public boolean ...

  7. leetcode-796-Rotate String

    题目描述: We are given two strings, A and B. A shift on A consists of taking string A and moving the lef ...

  8. HTML-常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  9. 【笔记】Django的视图

    [笔记]Django的视图 Python Django  Django的View(视图) 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应 ...

  10. Flutter 实现退出登录功能,应用退出到登录界面 | 返回应用首页

    1. 使用场景:退出登录./// 路由作用:移除 [ModalRoute.withName("/loginPage")] 除外的所有界面,并跳转到 ["/loginPag ...