吉祥的小程序是uniapp，通过一个项目可以多端发布，但是这个项目创建的时候是通过HbuilderX来图形化开发的，HbuilderX目录结构比较特殊，npm没有办法识别原生的HbuilderX项目（比如HbuilderX项...
吉祥的小程序是uniapp，通过一个项目可以多端发布，但是这个项目创建的时候是通过HbuilderX来图形化开发的，HbuilderX目录结构比较特殊，npm没有办法识别原生的HbuilderX项目（比如HbuilderX项目没有src目录），所以，如果想使用命令构建工具自动发布HubuilerX项目就比较麻烦，虽然HuilderX也号称有了命令构建工具，但支持极其有限，并且也不好用！npm的的项目HbuilderX是支持的，所以我还是把它改造成npm能够识别的项目。
一：改造思路：
1.1，通过vue的cli工具创建Uniapp项目（带src目录），然后替换新创建的uniapp项目中的src目录下的文件
1.2，把老项目下的除了 node_module文件和目录都copy到 新创建的uniapp项目的src目录下
1.3，在新创建的uniapp项目根目录下合并package.json 的依赖，把老项目（如果有package.json)的依赖合并到 新项目中的package.json中
1.4，合并根目录下的vite.config.js,index.html 把老项目的vite.config.js 和index.html文件合并到新的uniapp项目根目录下的 vite.config.js和index.html中（通过对比工具对比合并）
1.5，(可选）处理完成后，删除src/ 下的 package.json vite.config.js, index.html 等文件。
二：通过vue cli 工具创建初始化的uniapp项目
2.1，安装vue cli 工具（全局安装）
npm install -g @vue/cli
2.2，创建uniapp项目
vue create -p dcloudio/uni-preset-vue my-new-uniapp-project
后面的 my-new-uniapp-project 是初始化的目录名字，项目会自动创建
2.3，交互命令的选择：
命令行交互选择：
系统会问你选择什么模板（如下图所示）：
? Please pick a preset:
Default (Vue.js 3)
> Default (Vue.js 2) <-- 选这个（用键盘上下键选择，回车确认）
2.4，vue3 使用vite（新版webpack) 创建uniapp项目
npx degit dcloudio/uni-preset-vue#vite my-new-uniapp-project
注意如果使用npx 创建uniapp项目，后面的#vite是不能省略的，否则，下载的文件是preset
因为cloudio/uni-preset-vue 这个仓库的默认分支（master） 是为 vue create 命令设计的 Preset（预设）。
如果你用 （不带分支号），你下载的是Vue CLI 的插件源码。
你会看到里面有 generator.js、prompts.js 和一个 template 文件夹。 这些是不能运行的。
可以的话，还是老老实实使用：vue create -p dcloudio/uni-preset-vue my-uni-project 交互命令创建项目
2.5 如果使用vite 配合vue3 创建uniapp项目，vite.config.js 合并后的一般如下：
---------------------------------------------------------------------------------------------------------------------------------------------------
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/
import {
resolve
} from 'path'
export default defineConfig({
plugins: [
uni(),
],
css: {
preprocessorOptions: {
scss: {
// 【关键修复】自动导入 uni.scss
// 注意：如果你有其他全局变量文件（如 variables.scss），也可以在这里追加
additionalData: `
@import "@/uni.scss";
@import "@/static/styles/variables.scss";
@import "@/static/styles/mixins.scss";
`,
// 【可选】如果是 Sass 新版本，可以用这个选项屏蔽 import 废弃的警告
silenceDeprecations: ['legacy-js-api', 'import'],
charset: false
}
}
},
resolve: {
alias: {
'@': resolve(__dirname, '.')
}
},
base: './',
})
---------------------------------------------------------------------------------------------------------------------------------------------------------
主要是：additionalData 这个下面引入的插件。
base: './', 是把css，js的路径把成相对路径，它位于additionalData 这个配置项下
2.6 使用npm install 下来依赖插件
2.7 使用npm run build:h5 发布h5 的打包
如果报错，根据报错内容一路把全部报错解决掉！然后最终能通过npm run build:h5 打包完成
最后可以把项目导入到hbuilderx中，验证HBuilderX 是能正确识别这个npm项目，是否能通过hbuilderx 正常打包和发布！！！
