使用CLI创建UIAPP，项目配置（环境、跨域...）

公司需要在内网的情况下，也可以访问手机端，H5就是最佳的选择了。于是，我选择了用uniapp来开发这个H5，结果，遇到无数的坑，废话不多说，我们来时进入主题吧

说明
初次使用UIAPP这个框架的时候，发现这个编辑软件貌似不太稳定，如果，大家碰到一些没有代码问题，缺显示错误或无法显示，这个时候需要关闭软件并且重启，可能就好了。但是，也有碰到那种明明刚才好好的，可能是配置的时候添加了一些东西，导致显示错乱，可能重启也效果，这个时候需要新建一个项目，把就项目的东西针对性的copy过去。这些都是我爬过无数的坑，得出来的 "经验"

先看下项目的架构

项目结构目录.png

环境配置

因为，公司目前还没有正规的测试环境，所以，我就搭配了一个开发环境与生成环境，测试环境同理
1、开发环境 .env.development

测试环境.png

2、生成环境 .env.production

生成环境.png

跨域配置 vue.config.js

跨域配置.png

服务配置 service

const baseURL =  process.env.NODE_ENV === 'production' ? window.httpUrl : process.env.VUE_APP_BASE_API

function requestPromise (method, api, data, header = {
    'content-type': 'application/json' // 默认值
}) {
    return new Promise((resolve, reject) => {
        console.log(baseURL, method, api, data, header)
        uni.request({
            url: baseURL+api, //仅为示例，并非真实接口地址。
            data: data,
            method: method,
            header: header,
            success: (res) => {
                console.log(res.data)
                uni.hideLoading()
                let data = res.data, code = res.data.code, msg = res.data.msg
                if (!code) {
                    resolve(data)
                } else {
                    uni.showLoading({
                        title: msg
                    })
                }
            },
            fail: (res) => {
                console.log(res)
            }
        })
    })
}

export const get_  = (api, data = null, header = null) => {
    console.log(api, data, header)
    return requestPromise('GET', api, data, header)
}

export function post_ (api, data = null, header = null){
    return requestPromise('post', api, data, header)
}

api配置

import {get_, post_} from '@/service/request.js';

// 上传图片, 个人
export function uploadCanvasImage (jid, grqz, data) {
    let url = `xxxxxxxxxxxxxx&jid=${jid}&&grqz=${grqz}`
    console.log(url, data)
    return get_(url, data)
}

这里我使用的是导航栏自定义的用法，自己新建一个导航在这里不展开细说了，官网上有详细的介绍

为什么我会选择用cli来新建项目的呢？因为，我觉得这个cli新建的项目虽然比软件新建的项目复杂不少，但是，它的灵活性是软件新建项目无法比拟的。
各位配置好了之后，可以启动一个界面看下效果，如果，有什么问题的小伙伴，欢迎点赞并评论区留言，一起讨论共同进步