Vue二级目录部署&多环境打包部署（一）

如果是Vue-cli3的可以看我的下一篇文章：Vue二级目录部署&多环境打包部署（二）
我们的域名一般都是www.xxx.com，可是我们想实现www.xxx.com/aaa 或者 www.xxx.com/bbb怎么办呢？这就是我们今天要说的内容，部署到二级目录。

前端任务：

step1：下载安装cross-env

cnpm i cross-env --save-dev

step2：修改根目录package.json

//testA  | A测试环境  tapiA | A测试环境api域名
//testB  | A测试环境  tapiB | B测试环境api域名
//prod   | 生产环境   www   | 生产环境api域名
"private": true,
 "scripts": {
   "dev": "cross-env ASSETS_PUBLIC_PATH=testA webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
   "devB": "cross-env ASSETS_PUBLIC_PATH=testB API_PATH=tapiB webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
   "start": "npm run dev",
   "build": "cross-env ASSETS_PUBLIC_PATH=testA node build/build.js",
   "buildB": "cross-env ASSETS_PUBLIC_PATH=tapiB API_PATH=tapiB node build/build.js",
   "prod": "cross-env ASSETS_PUBLIC_PATH=prod API_PATH=www node build/build.js"
 }

step3：修改config/dev.env.js 和config/prod.env.js

//ASSETS_PUBLIC_PATH | 默认为testA
//API_PATH | 默认为tapiA

// prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ROUTER_BASE :process.env.ASSETS_PUBLIC_PATH ? '"'+process.env.ASSETS_PUBLIC_PATH+'"' : '"testA"',
  API_PATH :process.env.API_PATH ? '"'+process.env.API_PATH+'"' : '"tapiA"'
}

//dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROUTER_BASE :process.env.ASSETS_PUBLIC_PATH ? '"'+process.env.ASSETS_PUBLIC_PATH+'"' : '"testA"',
  API_PATH :process.env.API_PATH ? '"'+process.env.API_PATH+'"' : '"tapiA"'
})

step4：修改config/index.js

'use strict'
const path = require('path');
//获取设备的IP地址
const address = require('address');
const localhost = address.ip() || 'localhost'

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/'+process.env.ASSETS_PUBLIC_PATH+'/',
    proxyTable: {},
    host:localhost,
    port: 5510, 
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,
    cssSourceMap: true
  },

  build: {
    index: path.resolve(__dirname, '../'+process.env.ASSETS_PUBLIC_PATH+'/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../'+process.env.ASSETS_PUBLIC_PATH),
    assetsSubDirectory: 'static',
    assetsPublicPath:'/'+process.env.ASSETS_PUBLIC_PATH+'/',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

nginx任务：

修改nginx/con.d

server {
    listen 443;
    server_name www.xxx.com;
    client_max_body_size 20m;
    ssl on;
    ssl_certificate conf.d/ssl/server_test.pem;
    ssl_certificate_key conf.d/ssl/server_test.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;
    ssl_prefer_server_ciphers on;

#########
   location /testA {
       alias /app/nginx/static/project/demo/testA/;
       try_files $uri $uri/ @testA_router;
       index index.html;
    }

    location @testA_router {
       rewrite ^.*$ /testA/index.html last;
    }


   location /testB {
       alias /app/nginx/static/project/demo/testB/;
       try_files $uri $uri/ @testB_router;
       index index.html;
    }

    location @testB_router {
       rewrite ^.*$ /testB/index.html last;
    }
}

重启nginx

//方法一 如果想查以前执行的nginx命令记录,可以执行如下：

history | grep nginx

//方法二：如果没有记录，需手动进入nginx可执行目录sbin下
//1）首先验证nginx.conf文件是否有问题

/usr/sbin/nginx -t -c /etc/nginx/nginx.conf

//没有问题会展示
//nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
//nginx: configuration file /etc/nginx/nginx.conf test is successful
//2）然后执行重启命令

/usr/sbin/nginx -s reload -c /etc/nginx/nginx.conf

对引入路径进行配置，修改build/webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$'       : 'vue/dist/vue.esm.js',
      '@'          : resolve('src'),
      '$components': resolve('src/components'),
      '$api'       : resolve('src/api/api'),
      '$order'     : resolve('src/components/order')
    }
  },