Vuecli 3.0 项目自定义添加静态目录，支持在index.html引入

最新推荐文章于 2025-05-29 08:18:31 发布

理个以哈呦

最新推荐文章于 2025-05-29 08:18:31 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/qq_15253407/article/details/89491255

本文介绍了如何在Vuecli 3.0项目中添加自定义的静态目录，并详细讲解了如何配置使得这些静态资源能够在index.html文件中正确引入，以实现更灵活的项目结构管理。

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

// Vuecli 3.0 项目自定义添加静态目录，支持在index.html引入
            // 在VueCli3.0 以脚手架创建的项目中，public 中的文件不会被webpack进行打包，在npm run build 之后全部都会copy到 dist中
            一、在src的同级别目录添加static(vuecli2.0) (mkdir static/js/config.js)
            二、vue.config.js 添加配置信息
                // webpack的配置在这个属性里修改configureWebpack
                const CopyWebpackPlugin = require('copy-webpack-plugin'); // npm install --save-dev copy-webpack-plugin
                configureWebpack: config => {
                    if (process.env.NODE_ENV === 'development') {
                        config.devtool = 'source-map'
                        // mutate config for production...
                    }
                    config.plugins.push(
                        new CopyWebpackPlugin([
                            {
                                from: './static', // 新增可以被index.html访问的静态文件目录,支持多个
                                to: this.outputDir,
                                ignore: ['.*']