解决问题

重要的问题说三遍！！！

解决 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 查看

四、运行微信小程序开发工具

运行微信小程序开发工具后，出现 node_modules 文件夹即表示配置成功，配置成功后就可以快乐的玩耍了！！！

如果没有出现 node_modules 文件夹，则清除以下微信开发者工具缓存，然后重新编译项目。

​

五、为什么要选择uni-app？

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

1.开发者/案例数量更多

数百万应用、uni统计月活12亿、70+微信/qq群、更高的百度指数

跨端完善度更高，真正落地的提高生产力

2.平台能力不受限

在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。

支持原生代码混写和原生sdk集成。

3.性能体验优秀

加载新页面速度更快、自动diff更新数据。

App端支持原生渲染，可支撑更流畅的用户体验。

小程序端的性能优于市场其他框架。评测

4.周边生态丰富

插件市场数千款插件。

支持NPM、支持小程序组件和SDK。

微信生态的各种sdk可直接用于跨平台App。

5.学习成本低

基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。

6.开发成本低

不止开发成本，招聘、管理、测试各方面成本都大幅下降。

HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。