通过配置打包命令行，满足自动化部署要求

改造背景：接到需要支持通过命令行打包，实现自动化部署H5的需求，然而通过Huilder新建的uniapp项目可以通过HBuilder 生产工具打包文件，或者HBuilder 的cli.exe cli 打包，然而cli 的打包配置略显繁琐，于是有了下面的探究

一、创建项目

1、全局安装vue-cli ，此处建议安装@4.5.15 版本

npm install -g @vue/cli@4.5.15

注意如果安装的为最新版本，会与Webpack4 不匹配，后续打包会报错

2、创建Uniapp 项目，根据项目实际需要选择项目模板

vue create -p dcloudio/uni-preset-vue my-project

1、安装 uview

npm install uview-ui@2.0.31

2、引入uView

// main.js，注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)
// uView2.x将单位默认改为px，如果需要将单位改为rpx，可以进行如下配置即可：
uni.$u.config.unit = 'rpx'

3、在pages.json中配置easycom规则

	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

参考文档:

4、 uni.scss 引入uview 主题样式文件

@import 'uview-ui/theme.scss';

5、App.vue 文件引入uView 样式

<style  lang="scss">
  @import 'uview-ui/index.scss';
</style>

5、根目录下新建 vue.config.js 文件添加以下内容

module.exports = {
    transpileDependencies: ['uview-ui']
}

如果不配置，运行汇报错

（1）配置H5 打包路径

找到项目中 manifest.json --- H5 配置---运行时的基础路径， ./ 代表相对路径、/h5/ 表示部署在域名的/h5路径下，根据项目实际需求配置

（2）选择“发行” 选择 “网站-PC Web 或手机H5”打包

3、填写项目打包相关信息后点击发行

4、发行成功后可以在找到打包文件

（1）配置H5 打包路径

找到项目中 manifest.json --- H5 配置---运行时的基础路径，

./ 代表相对路径、/h5/ 表示部署在域名的/h5路径下，根据项目实际需求配置

（2）执行打包命令

****使用vue-cli 创建的uniapp 项目，package.json文件里面会自动生产不同环境的打包命令，如下图

在项目路径下执行打包命令

 npm run build:h5

（3）打包成功, 打包文件路径： dist\build\h5

（4）配置jenkins 自动部署命令，即可实现H5端自动化部署

1、npm run serve 报错

解决办法： npm install sass -d

2、待扩充