vue-cli项目打包多个与static文件同级的静态资源目录(copy-webpack-plugin插件的使用)
2018-12-14 19:59
2531 查看
场景
业务要求能够直接通过 “域名+/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项目使用webpack打包时纯静态资源的处理
- 用webpack打包vue项目后,静态资源路径失效问题
- 使用vue-cli创建项目,webpack打包
- 解决vue-cli项目webpack打包后iconfont文件路径的问题
- vue-cli项目webpack打包后iconfont文件路径问题解决
- vue 使用vue-cli打包工具生成基于webpack模板的项目
- vue2.0 配置build项目打包目录、资源文件(assets\static)打包目录
- vue-cli webpack打包不.map文件,iview 项目打包完,图标路径有问题
- vue-cli与webpack处理静态资源的方法及webpack打包的坑
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析,配置信息详解
- vue-cli的webpack模板项目配置文件分析
- 使用webpack打包后的vue项目如何正确运行(express)
- vue-cli 新创建的项目启动报错 Module build failed: Error: "extract-text-webpack-plugin"
- 底层:vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
- 关于使用Vue-cli脚手架配合webpack-simple构建项目操作流程(自用)
- Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件
- 如何使用webpack打包vue项目?
- vue-cli脚手架build目录中的webpack.dev.conf.js配置文件