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

这篇具有很好参考价值的文章主要介绍了【uni-app】微信小程序开发 node_modules 模块丢失问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

解决问题

重要的问题说三遍！！！

解决 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 文件进行配置

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

在 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 查看