多项目处理

一、相同域名多项目处理

  • 1、vue同一域名下多项目集成处理(v.tusuav.com)

  • 1.1、路由配置

    • 项目一(live)配置如下
    • 项目二(tusuav) 无需配置
export default new Router({
  mode:'history',
  base: '/tusuav', // 项目二文件根目录名称
  routes: [{}]
})
  • 1.2、根目录关系(根文件名)
    • 目录一 live/dist
    • 目录二 tusuav/dist
  • 1.3、nginx配置
server
{
    server_name testapi.tusuav.com;
    listen 9062;

    # 直播H5
    location / {
        alias /data/www/yeming/live/dist/;
        try_files $uri $uri/ @router1;
        index index.html;
    }

    # 参数 @router1 解决项目一刷新404问题
    location @router1 {
        rewrite ^.*$ /index.html last;
    }

    # 通用h5 
    location /tusuav {
        alias  /data/www/yeming/tusuav/dist;
        try_files $uri $uri/ @router2;
        index  index.html;
    }

    # 参数 @router2 解决项目二刷新404问题
    location @router2 {
        rewrite ^.*$ /tusuav/index.html last;
    }

    # 接口反向代理
    location /api/ {
        proxy_pass https://yxapi.zerotech.com;
    }
    location /baseapi/ { 
        proxy_pass https://livegfapi.zerotech.com/;
    } 

    access_log  /data/log/nginx/8215.testapi.zerotech.com.log main;
}

二、不同环境一键打包(参考:https://www.cnblogs.com/dashwood/p/11624456.html)

  • 2、按要求分别打包开发、测试、正式环境代码

  • 2.1、安装 cross-env 依赖

cnpm install --save-dev cross-env
  • 2.2、分别配不同文件
    • 在 config 目录中添加 test.env.js
    • 修改 config 目录中 prod.env.js
    • 修改 config 目录中 dev.env.js
    • 修改 congig 目录中 index.js
    • 修改 build 目录中 webpack.prod.conf.js
    • 修改 build 目录中 build.js
    • 修改 package.json
// config/test.env.js
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"'
}

// config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"'
}

// config/dev.env.js
module.exports = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"'
}

// config.index.js
build: {
    //添加下面两行代码
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    // Template for index.html
    index:
      path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...................  
}

// build/webpack.prod.conf.js
...................  
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env'];
...................  

// build/build.js
...................  
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' );
...................  

// package.json
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },
  • 2.3、axios 出口统一配置,兼容开发环境
    • 修改 api/base.js
const ENV_DEV = 'development'; // 开发环境
const ENV_TEST = 'testing'; // 测试环境
const ENV_PRO = 'production'; // 线上环境

const BASEURL_PRO = 'http://livegfapi.tusuav.com';
const BASEURL_TEST = 'http://api.test.com';
const BASEURL_PROXY_REPAIR = '/baseapi';
const BASEURL_PROXY_LIVE = '/liveapi';

let nodeEnv = process.env.NODE_ENV;
let repairModuleApi = '';
let liveModuleApi = '';

if (nodeEnv === ENV_DEV) {
  repairModuleApi = BASEURL_PROXY_REPAIR;
  liveModuleApi = BASEURL_PROXY_LIVE;
}
if (nodeEnv === ENV_TEST) {
  repairModuleApi = BASEURL_TEST;
  liveModuleApi = BASEURL_TEST;
}
if (nodeEnv === ENV_PRO) {
  repairModuleApi = BASEURL_PRO;
  liveModuleApi = BASEURL_PRO;
}

let base = {};
base.repair = repairModuleApi;
base.live = liveModuleApi;

export default base

三、

千千学习、练习用
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。