Vue项目打包上线

## web项目开发完成后打包上线(windows系统)

1. 开发完成后执行 npm run build 进行打包vue项目 得到的是一个dist文件夹(内含html,js,css,fonts等)

2. 上线

上线实际上就是将 打包后的web项目放在 服务器上 用户通过访问服务器来访问web项目

一般前端工程师不用太关心上线问题都是将打包后的代码传递相应的开发人员（运维，后端工程师）

可能会遇见的问题:

问题1：打包后页面空白问题

解决： 打包前在vue.config.js配置文件中添加publicPath:"./"

问题2：请求的问题

解决： 打包前将 axios默认请求地址代理代替为生产请求地址(原api地址)

            web端上线后一般前后端项目存放在同一个服务器内 一般无需跨域

## web项目打包成手机app

市场上app分三种：

1.  原生app：安卓app (java语言)  ios app(oc语言)

2. 混合开发app(既有原生开发，又有web开发)：

   安卓app(web（js）+java) ios app(oc+前端)

3. web app：(纯前端)

   安卓 ios 都是以web前端开发

打包步骤：

我是一个vsCode编辑器的用户,vsCode无法打包将项目直接打包成移动端app项目 所以我打包一般用HBuilderX

下载地址：https://www.dcloud.io/hbuilderx.html

1. 根据需求下载版本 这里下载了window标准版

2. 第一次使用HBuilder需要在DCloud开发者中心注册一个用户

   地址：https://dev.dcloud.net.cn/

3. 登录DCloud开发者中心  创建h5+app应用 记录生成的appid！！！

4. 使用hbuilderx创建一个h5+项目

5. 将我们的打包后的vue项目复制到h5+项目中，注意：将h5+自带的js，css，img，html删除(除了这几个其他都不要删除！)

  （使用的时候它会提示下载好多插件 默认下载就ok了）

6. 选中项目 点击顶部导航栏 发行 选择云打包

7. 打包时选择使用测试证书（这里为了避免麻烦就选择公共测试证书）配置打包选项manifest.json 点击打包

8. 打包成功后会自动返回下载链接