一、Vue 项目打包基础
1.1 选择合适的打包工具
Vue 项目打包通常使用 vue-cli 或 vite 等工具。本文以 vue-cli 为例进行讲解。
1.2 配置项目环境
确保已安装 Node.js 和 npm。创建 Vue 项目，并进入项目目录：
vue create my-vue-project
cd my-vue-project
1.3 配置打包选项
在 package.json 文件中，找到 scripts 部分，并添加如下配置：
"scripts": {
"build": "vue-cli-service build"
}
1.4 执行打包命令
在项目根目录下，运行以下命令进行打包：
npm run build
打包完成后，会在 dist 目录下生成打包后的文件。
二、微信小程序一键上线
2.1 准备小程序开发环境
2.2 配置小程序项目
- 将打包后的文件（
dist目录下的所有文件）复制到小程序项目的src目录下。 - 修改
src/app.json文件，添加必要的配置信息，如：
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小程序",
"navigationBarTextStyle": "black"
}
}
2.3 上线小程序
- 在微信开发者工具中，选择“上传代码到微信小程序”。
- 在弹出的窗口中，选择已配置的项目目录，并点击“上传”。
- 上传完成后，点击“预览”或“预览并上传”按钮，即可在微信客户端查看小程序效果。
2.4 小程序审核与发布
- 在微信公众平台，登录小程序后台。
- 在“设置”菜单中，找到“版本管理”。
- 点击“提交审核”，填写相关信息并提交审核。
- 审核通过后，点击“发布”。