Vue项目中添加一些独立的静态资源（内嵌独立静态页面等）

亲爱的非洲野猪

已于 2024-05-24 12:40:30 修改

阅读量4.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-02-08 21:55:22 首次发布

本文链接：https://blog.csdn.net/weixin_43680337/article/details/122831857

前端专栏收录该内容

5 篇文章

订阅专栏

在Vue项目中，若要包含独立的静态HTML资源，可通过`copy-webpack-plugin`进行配置。首先，在项目根目录下安装该插件，然后在`webpack`配置中声明插件，将静态资源从`static`目录复制到打包后的`static`目录，确保Vue页面能直接访问。只需简单几步，即可实现静态资源的打包和定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果需要在vue项目中放一些独立的静态资源，比如html 文件，需要在打包的时候指定一下静态资源的位置，并指定打包后的位置。

使用的是 copy-webpack-plugin 插件。

先安装一下，到项目的根目录下执行

npm install --save-dev copy-webpack-plugin

接下来比如我想要在项目根目录下的static 文件夹中放一些静态的html,让vue页面可以直接访问到，可以这么做：

const CopyPlugin = require("copy-webpack-plugin") //引入插件


module.exports = {
    configureWebpack:{
        plugins: [
            new CopyPlugin([
                {
                    from: "static",
                    to: "static"
                },
            ]),
        ]
    } 

}

使用的话更简单了：