background

Recently, the team has been piloting uni-app to do some small requirements, but it is mainly piloted on H5 first, and then compiled into small programs for release as planned. This time, I will share some small problems encountered and solutions.

The problems described below are mainly encountered when developing the H5 platform with uni-App, and can be ignored for non-H5 platforms.

Cross-domain problems

First, when developing locally, unlike when developing directly with a small program IDE, when developing the H5 platform, you need to use a browser for debugging, and browsers can have cross-domain problems. For example, when you access a developing page directly through the local IP address, and the page calls some existing interfaces, you face cross-domain problems.

The official solution

Uni-app officially introduces some methods to solve cross-domain problems, such as enabling CORS for the server and installing cross-domain plug-ins for the browser. For details, see precautions for using THE H5 version of Uni-App. What is not mentioned is that if you don’t want to go to so much trouble to solve the problem, there is a more convenient way, which is to use webpack-dev-server to solve the problem.

More convenient solution

According to the official documentation, the devServer configuration is required to be configured in manifest.json, and since the configuration file is in JSON format, it can only be configured for simple types. But it is sufficient for the proxy configuration. To solve the problem, perform the following configuration:

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                "/prefix/api/user/list": {
                    "target": "https://api-remote.xxxx.com"."pathRewrite": {
                        "^/prefix": ""
                    }
                }
            }
        }
    }
}

Copy the code

Another solution

Create a vue.config.js file and configure devServer in it

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/prefix/api/user/list': {
        target: 'https://api-remote.xxxx.com'.pathRewrite: {
          '^/prefix': ' '}}},}}Copy the code

The benefits of this approach are obvious. It is more flexible to use JS instead of JSON for configuration. It is important to note that the above two solutions cannot be used together, as the first one will override the second one.

The problem of the Mock

This may not be such a big deal, as there are plenty of online Mock platforms like Easy Mock. But if you don’t want to go to the trouble of leaving the code edit window to register, write an online Mock, and want to do everything in code, you can also use the second option above

The solution

Using mocker-API and MockJS, you can configure the devServer before option directly as follows:

// vue.config.js
const webpackApiMocker = require('mocker-api')

module.exports = {
  devServer: {
    before (app) {
      webpackApiMocker(app, path.resolve('./mock/index.js'))}}}// mock/index.js
const Mock = require('mockjs')

const Random = Mock.Random
const mock = Mock.mock

const proxy = {
  'GET /api/user/list': mock({
    'array|3': [{id: 1.username: 'kenny'.sex: 'male'}}),'POST /api/login/account': (req, res) = > {
    return res.json({
      status: 'ok'.data: {
        id: Random.id(),
        userName: Random.cname(),
        city: Random.city()
      }
    })
  }
}

module.exports = proxy
Copy the code

The problem of publicPath

In the test phase, we need to deploy the code to CDN for testing. Different environments correspond to different CDN domain names. It is obviously not flexible to configure publicPath officially through manifest.json. And it doesn’t require developers to care.

The solution

Solving this problem will require some minor modifications to the scaffolding.

  • First, we’re going topublicPathThis configuration is put in a separate configuration file, such asproject-config.jsAnd put in the project root directory
const projectName = 'xxx' // The name of the current project
const isDev = isDev() // If it is a local development environment, it is free to play here
const CDN_HOST = process.env.CDN_HOST   // The CDN domain specified during the build
const APP_ENV = process.env.APP_ENV // The custom environment specified during build

module.exports = {
  publicPath: isDev
    ? '/'
    : ` / /${CDN_HOST}/static/${projectName}/${APP_ENV}/ `,}Copy the code
  • Second, we fork a version of the official uni-app source code, and to@dcloudio/vue-cli-plugin-uni/index.jsI changed it a little bit
// @dcloudio/vue-cli-plugin-uni/index.js#L30
// Get the local project-config configuration
module.exports = (api, options) = > {
    const projectConfig = require(api.resolve('project-config'))

    Object.assign(options, { 
        outputDir: process.env.UNI_OUTPUT_TMP_DIR || process.env.UNI_OUTPUT_DIR,
        assetsDir
    }, vueConfig, {
        // Overwrite publicPath again
        publicPath: process.env.NODE_ENV === 'production' ? projectConfig.publicPath : '/'})}Copy the code

This invalidates the configuration in manifest.json, which is slightly affected if you are developing with HBuilder.

Pay attention to our