vue-element-admin打包后在uniapp使用安卓移动端运行注意事项

vue-element-admin项目打包在uniapp并在移动端使用注意事项（主要是解决白屏问题）

1）打包命令为npm run build:prod（需根据自己项目的package.json中的"vue-cli-service build"看其设置的命令是什么）

打包后会生成dist文件夹

2）修改vue.config.js内的publicPath: './',（没修改前为'/'）

3）修改src/utils/auth.js内有三个方法（getToken、setToken、removeToken）

把其中的Cookies全都替换为localStorage

export function getToken() {
  // return Cookies.get(TokenKey)
  return localStorage.getItem(TokenKey)
}

export function setToken(token) {
  // return Cookies.set(TokenKey, token)
  return localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  // return Cookies.remove(TokenKey)
  return localStorage.removeItem(TokenKey)
}

4）检查src/router/index.js内的

const createRouter = () => new Router({
  // mode: 'history', // 此处若为history则改为hash，或者直接删掉
                      如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：
                       如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

5）在项目中如果使用了es6的语法，一些浏览器不支持es6。（非必须）

（此处最后在调试，其余基本属于必须改，此处可先不改，若其他修改后项目还是白屏可再添加此处修改）

1. 安装 npm install --save-dev babel-preset-es2015

2. 安装 npm install --save-dev babel-preset-stage-3

3. 在项目根目录创建一个.babelrc文件 里面内容 最基本配置是：

{
// 此项指明，转码的规则
"presets": [
// env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码
["env", { "modules": false }],
// 下面这个是不同阶段出现的es语法，包含不同的转码插件
"stage-2"
],
// 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中，不产生注释
"comments": false,
// 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置
"env": {
// test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一个用来测试转码后代码的工具
"plugins": ["istanbul"]
}
}
}

6）查看官网uniapp。下载HBuilder X后打开工具-插件安装-安装新插件 这几个都可以下载下来。

根据官网内的https://ask.dcloud.net.cn/article/36174（vue h5转换uni-app指南（vue转uni、h5转uni））

1.文件——新建——项目选择5+App 然后输入项目名称 第二行为项目路径，选择默认模板即可，点击创建

创建成功后右下角会提示项目创建成功

2.删除里面的 css、img、js、index.html，然后把vue项目打包后的dist文件夹内的所有东西复制到该项目中

3.手机数据线连接电脑，最好插在后面的usb接口（选择仅充电即可），前面的电压不稳可能会导致手机检测不到

4.手机需开启开发者模式，并打开开发者选项内的USB调试和USB安装。不开启会导致基座安装不上去

5.点击项目——点击运行（在窗口上方）——运行到手机或模拟器——运行到Android App基座（若是ios自看官网）

6.检测到手机后运行新项目，此时手机端会提示安装Hb，确定即可。然后等待安装和程序运行。

可以选择打开内置浏览器检查项目是否正常，内置浏览器打开可能没反应，多等一会或多点几次，可能为网络不好

7.运行Hb时可能会要求你注册，注册就行，然后在manifest.json中重新获取AppID

8.HB内修改内容后需手动保存。且只有项目类型为App的才可以在移动端运行。可右键检查项目类型