The front-end server configuration deployment Vue uni-app multi-environment issues

Reproduced, please indicate the source:
http://dujinyang.blog.csdn.net/
article from: Superman's blog [Altman]

@ (Vue uni how to deploy to the server, and to distinguish between deployment environments)

Front-end Vue

Vue after a year of evolution, the template is also very rich, but when using the multi-interface, personal feel a little drawbacks, CSS style issues.

Vue.js (pronunciation / vjuː /, similar to the view) is a progressive frame constructing user interfaces.

For problems

Multi-environment deployment can cause a lot of problems, of course, is the development environment, the bloggers I also led this small problem, so you can see a lot of people have questions about the deployment environment, after all, Vue no leakage of storms like as JAVA configurable environment.

SyntaxError: Unexpected token p in JSON

• Need to distinguish between development, QA, pre-release, and other production environment, how to meet?
• To automatically determine how to deploy it on the server?

Use of Uni-app is also this time of curiosity to see the look, of course, does not see the use, but the whole structure of curiosity generated templates, or use HBUILDER to develop, so we have to pay attention to two things:

1. Vue only concerned view layer , a bottom-up design incremental development.
2. Vue API implements data binding and view components, so a lot of people with a npm installpost will appear a series of problems the package .

package.json description

Whether you install components or template instructions, will always see the directory package.json, then this file is what to do with it? In fact, this file is equivalent to config, so you have to pay attention distor lib.

Multi-environment deployment

A lot of people want to be like the same AS or Gradle to describe the configuration environment, similar to this pseudo-judgment:

区分 开发、QA、预发布、生产等多个环境
if (process.env.ENV === 'development') {

}

if (process.env.ENV === 'QA') {

}

if (process.env.ENV === 'pre-release') {

}

if (process.env.ENV === 'production') {

}

I will complain? To look at the source in the end is why ......

View source for resolution

Look at the source, Key path is the path of the read path, so that:

const path = require('path')

Others can be ignored, it is important that the following passage:

module.exports = function (content) {
  if (process.env.UNI_USING_COMPONENTS || process.env.UNI_PLATFORM === 'h5') {
    return require('./index-new').call(this, content)
  }

  this.cacheable && this.cacheable()

  const manifestJsonPath = path.resolve(process.env.UNI_INPUT_DIR, 'manifest.json')
  const manifestJson = parseManifestJson(fs.readFileSync(manifestJsonPath, 'utf8'))

  this.addDependency(manifestJsonPath)

  const pagesJson = parsePagesJson(content)

  if (manifestJson.transformPx === false) {
    process.UNI_TRANSFORM_PX = false
  } else {
    process.UNI_TRANSFORM_PX = true
  }
  if (process.env.UNI_PLATFORM === 'h5') {
    return require('./platforms/h5')(pagesJson, manifestJson)
  }

  const changedEmitFiles = []

  function checkPageEmitFile (pagePath, pageStyle) {
    checkEmitFile(pagePath, parseStyle(pageStyle), changedEmitFiles)
  }

  parsePages(pagesJson, function (page) {
    checkPageEmitFile(page.path, page.style)
  }, function (root, page) {
    checkPageEmitFile(normalizePath(path.join(root, page.path)), page.style)
  })

  const jsonFiles = require('./platforms/' + process.env.UNI_PLATFORM)(pagesJson, manifestJson)

  if (jsonFiles && jsonFiles.length) {
    jsonFiles.forEach(jsonFile => {
      jsonFile && checkEmitFile(jsonFile.name, jsonFile.content, changedEmitFiles)
    })
  }

  changedEmitFiles.forEach(name => {
    this.emitFile(name + '.json', emitFileCaches[name])
  })

  return ''
}

A bit more to extract it:

  if (manifestJson.transformPx === false) {
    process.UNI_TRANSFORM_PX = false
  } else {
    process.UNI_TRANSFORM_PX = true
  }
  if (process.env.UNI_PLATFORM === 'h5') {
    return require('./platforms/h5')(pagesJson, manifestJson)
  }

Too many other code, not yet posted, roughly meaning is parsed package.json, go read the manifest configuration H5, so finally found a manifest configuration problem, look for a more pubilcPath, later removed, SyntaxError: Unexpected token pthe error will Disappeared.

Because contemporary path in the directory, so the packaging will be introduced when the config, it just need to own a separate configuration file.

This would solve, of course, one can also install cross-env, install the code:

npm install --save-dev cross-env

In this case, we can define:

"build": "cross-env BUILD_ENV=production node build/build.js",
"QA": "cross-env BUILD_ENV=QA node build/build.js",
"TEST": "cross-env BUILD_ENV=TEST node build/build.js"

This eliminates the need to configure a separate addition, of course, you can put the current BUILD_ENVsettings to the environment variable, if it is not commonly used settings is not recommended.

grammar:

cross-env xxx=xxx node build/build.js

Then the final code:

 let ENV = process.env.BUILD_ENV;

  if (ENV == 'production') {
    // 生产环境 
  } else if (ENV == 'QA') {
    // 测试环境 
  }else if(ENV== 'TEST'){
    // 开发测试
  }

You can own to define global variables to use, or modify the source code in the index, so much trouble, I modified the small series, but all projects with a specific field to use.

• KARL-Dujinyang .link.

---

|| Disclaimer: This article is a blogger Du Jinyang original articles, please indicate the source.

---

Author: Altman Superman Dujinyang

Source: CSDN

Original: https://dujinyang.blog.csdn.net/

Disclaimer: This article is a blogger original article, reproduced, please attach Bowen link!