zoukankan      html  css  js  c++  java
  • vue项目分环境打包配置

    解决方案一:nginx代理转发

      项目build后,通过nginx代理转发

            location / {
                root   D:myprojectmy-vuedist;
                index  index.html index.htm;
            }
            location /pyapi { 
                proxy_pass 'http://localhost:5002'; #配置后台服务器
        }

    解决方案二:通过corss-env,修改相关配置

    1.安装:npm install cross-env --save-dev

    2.修改各环境下的参数,在 config 目录下添加 test.env.js,并修改dev.env.js, prod.env.js,修改后内容如下

    test.env.js

    'use strict'
    module.exports = {
      NODE_ENV: '"testing"',
      EVN_CONFIG:'"test"',
      API_ROOT:'"http://127.0.0.1:5003"'
    }

    dev.env.js

    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      EVN_CONFIG: '"dev"',
      API_ROOT: '"http://127.0.0.1:5002"'
    })

    prod.env.js

    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      EVN_CONFIG:'"prod"',
      API_ROOT:'"http://127.0.0.1:5000"'
    }

    3.修改 package.json 文件中的 scripts 内容.(NODE_ENV最好都设成 production,因为在 utils.js 只做了production 一种判定)

      "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "build-test": "cross-env NODE_ENV=production env_config=test node build/build.js",
        "build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
      },

      发布到test环境运行npm run build-test;发布到生产环境运行npm run build-prod;其他环境可根据此做类似配置

    4.修改 config/index.js 文件中 build 参数,这里的参数会在 build/webpackage.prod.conf.js 中使用到

      build: {
        // Template for index.html
            // 添加test  prod 环境的配制
            prodEnv: require('./prod.env'),
            testEnv: require('./test.env'),
        
        
    }    

    5.对 build/webpackage.prod.conf.js 文件进行修改,调整 env 常量的生成方式。

    // 个性env常量的定义
    // const env = require('../config/prod.env')
    const env = config.build[process.env.env_config+'Env']

    6.修改 build/build.js 文件
    删除 process.env.NODE_ENV 的赋值,修改 spinner 的定义,调整后的内容如下:

    'use strict'
    require('./check-versions')()
    // 注释掉的代码
    // process.env.NODE_ENV = 'production'
    const ora = require('ora')
    const rm = require('rimraf')
    const path = require('path')
    const chalk = require('chalk')
    const webpack = require('webpack')
    const config = require('../config')
    const webpackConfig = require('./webpack.prod.conf')
    // 修改spinner的定义
    // const spinner = ora('building for production...')
    var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
    spinner.start()
    

     7.在网络请求处,设置baseUrl

    // 设置baseURL
    axios.defaults.baseURL = process.env.API_ROOT

     

     

  • 相关阅读:
    Thinking in java Chapter10 内部类
    策略设计模式 Strategy模式
    Thinking in java Chapter9 接口
    Thinking in java Chapter8 多态
    Thinking in java Chapter7 复用类
    mock服务
    文件的使用方式
    字符编码与文件处理方式
    各容器类型及内置方法
    python各数据类型及内置方式:
  • 原文地址:https://www.cnblogs.com/jlyuan/p/13614242.html
Copyright © 2011-2022 走看看