陌上人如玉
公子世无双

vue开发微信商城项目总结之三--根据不同的开发环境做配置

项目是基于vue-cli搭建,项目分为开发环境,测试环境,预生产环境,生产环境,

其中开发环境和测试环境调用同一个接口,开发环境调用服务器端的测试接口会跨域,

以上需求就引发了一些问题,

问题一:

测试环境(包括开发环境,并且开发环境跨域),预生产环境,生产环境,有着不同的接口地址,也就是不同的开发环境要调用不同的接口地址,

有的时候不同的开发环境还要调用不同的全局变量。

问题二:

本地开发环境跨域,本地开发环境调用服务器端接口地址,会跨域,但是代码打包上传到服务器,不会跨域

    之前的解决方案(没有依赖webpack)

开发环境下,在static下新建一个config文件夹,再新建一个config.js,这是开发版的config,里面包含了开发和测试的接口地址和全局变量,并在index.html中手动引入(static中的文件不被webpack管理)如下

<script src="/static/config/config.js"></script>

将config文件夹上传到测试服务器,开发环境打包后,将index.html中的config.js的路径更改为服务器端的config.js,如下

<script src="./config/config.js"></script>

同理,预生产环境,生产环境,和测试环境一样,分别配置不同的config文件,也就是接口地址和全局变量,打包后更改压缩后的index.html


这样配置带来了很多问题和不便,要配置不同的config接口道不同的服务器,打包后需要手动修改config路径,但是也有一个好处,打包一次,三个环境可以共用,因为config接口在服务器端

以上是开发过程中,遇到的问题,

后来了解了一下webpack,发现vue-cli中有解决方案,研究一下并做了一下修改,脚手架地址

build>build.js

nrequire('./check-versions')()

// process.env.NODE_ENV = 'production'

var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfigProd = require('./webpack.prod.conf')
var webpackConfigPpe = require('./webpack.ppe.conf')
var webpackConfigDdd = require('./webpack.ddd.conf')

if(process.env.NODE_ENV === 'production'){
  var spinner = ora('building for 生产...')
  spinner.start()
  rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
    if (err) throw err
    webpack(webpackConfigProd, function (err, stats) {
      spinner.stop()
      if (err) throw err
      process.stdout.write(stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: false,
        chunkModules: false
      }) + '\n\n')
      console.log(chalk.cyan('  Build complete.\n'))
      console.log(chalk.yellow(
        '  Tip: built files are meant to be served over an HTTP server.\n' +
        '  Opening index.html over file:// won\'t work.\n'
      ))
    })
  })
}else if(process.env.NODE_ENV === 'ppe'){
  var spinner = ora('building for 预生产...')
  spinner.start()
  rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
    if (err) throw err
    webpack(webpackConfigPpe, function (err, stats) {
      spinner.stop()
      if (err) throw err
      process.stdout.write(stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: false,
        chunkModules: false
      }) + '\n\n')
      console.log(chalk.cyan('  Build complete.\n'))
      console.log(chalk.yellow(
        '  Tip: built files are meant to be served over an HTTP server.\n' +
        '  Opening index.html over file:// won\'t work.\n'
      ))
    })
  })
}else if(process.env.NODE_ENV === 'ddd'){
  var spinner = ora('building for 测试...')
  spinner.start()
  rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
    if (err) throw err
    webpack(webpackConfigDdd, function (err, stats) {
      spinner.stop()
      if (err) throw err
      process.stdout.write(stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: false,
        chunkModules: false
      }) + '\n\n')
      console.log(chalk.cyan('  Build complete.\n'))
      console.log(chalk.yellow(
        '  Tip: built files are meant to be served over an HTTP server.\n' +
        '  Opening index.html over file:// won\'t work.\n'
      ))
    })
  })
}

具体代码可以看github

根据不同的环境调用不同的接口


赞(0) 打赏
未经允许不得转载:陌上寒 » vue开发微信商城项目总结之三--根据不同的开发环境做配置

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

微信扫一扫

支付宝扫一扫