【uni-app】微信小程序开发 node_modules 模块丢失问题

Hi 小朋友

已于 2023-06-27 10:46:43 修改

阅读量1.3w

点赞数 3

分类专栏：前端开发文章标签： uni-app 微信小程序

于 2022-10-09 19:18:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_64172426/article/details/127232121

版权

前端开发专栏收录该内容

6 篇文章

订阅专栏

解决问题

重要的问题说三遍！！！

解决 HBuilderX 打包 uni-app 项目到微信小程序时，node_modules 文件夹丢失问题。

解决 HBuilderX 打包 uni-app 项目到微信小程序时，node_modules 文件夹丢失问题。

解决 HBuilderX 打包 uni-app 项目到微信小程序时，node_modules 文件夹丢失问题。

一、uni-app介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 在手，做啥都不愁。即使不跨端，uni-app 也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

二、安装 copy-webpack-plugin 复制插件

node_modules 不是 uni-app 的默认目录，不会被打包进 /unpackage/dist/dev/mp-weixin, 我们可以下载 copy-webpack-plugin 插件，将 node_modules 目录复制到 /unpackage/dist/dev/mp-weixin

这里安装的 copy-webpack-plugin 版本为 5.1.1。

npm install copy-webpack-plugin@5.1.1 --save

三、新建 vue.config.js 配置文件

安装完后在项目根目录新建 vue.config.js 文件进行配置

在 vue.config.js 文件中添加以下内容

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
 
module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: path.join(__dirname, 'node_modules'),
                    to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'development' ? 'dev' : 'build', process.env.UNI_PLATFORM, 'node_modules')
                }
            ])
        ]
    }
}

关于 copy-webpack-plugin 插件的更多用法可通过 https://www.npmjs.com/package/copy-webpack-plugin 查看