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

如果是Vue-cli2的可以看我的上一篇文章：Vue二级目录部署&多环境打包部署（一）

我们的域名一般都是www.xxx.com，可是我们想实现www.xxx.com/aaa 或者 www.xxx.com/bbb怎么办呢？这就是我们今天要说的内容，部署到二级目录

1）在根目录创建 .env.xxx 文件，vim命令

//例如 .env.development文件，默认执行 npm run dev 会加载这个文件，下边有讲到
//step:1 创建文件，已有是打开该文件
vim .env.development
//step:2 进入编辑模式
按键盘 英文 i
//step:3 输入你要写的内容，例如：
VUE_APP_APIPATH = 'tapiA'
//step:4 退出编辑模式
按键盘  esc
//step:5 保存内容 : 是英文状态
:wq  | 保存     :q! |不保存
//step:6 一切顺利，你会看到根目录出现 .env.development 文件
//step:7当然有的电脑会隐藏 .文件，可以执行如下命令
ls -a

2） 根据环境需要，创建多个 .env.xxx文件

//.env.development 
VUE_APP_APIPATH = 'tapiA'

// .env.developmentB
VUE_APP_APIPATH = 'tapiB'
VUE_APP_BASE_URL ='testB'

//.env.production
VUE_APP_APIPATH = 'www'

//.env.testA
VUE_APP_APIPATH = 'tapiA'
NODE_ENV = 'production'

//.env.testB
VUE_APP_APIPATH = 'tapiB'
NODE_ENV = 'production'
VUE_APP_BASE_URL ='testB'

3）修改根目录package.json 文件

"private": true,
"scripts": {
  "dev": "vue-cli-service serve",
  "devB": "vue-cli-service serve --mode developmentB",
  "build": "vue-cli-service build --mode testA",
  "buildB": "vue-cli-service build --mode testB",
  "prod": "vue-cli-service build"
}

4）在根目录创建文件 vue.config.js文件

const path = require('path');

function resolve (dir) {
  return path.join(__dirname, dir)
}
//自动获取设备IP地址，并打开默认浏览器
const address = require('address');
const localhost = address.ip() || 'localhost';
//根据环境，加载不同css变量文件，不需要删除 sassData 
let sassData =`@import "@/assets/css/common.scss";@import "@/assets/css/testA.scss";`;
if(process.env.VUE_APP_BASE_URL =='testB'){
  sassData = `@import "@/assets/css/common.scss";@import "@/assets/css/testB.scss";`
}

module.exports = {
  /** 区分打包环境与开发环境
   * process.env.NODE_ENV==='production'  (打包环境)
   * process.env.NODE_ENV==='development' (开发环境)
   */
  publicPath: `/${process.env.VUE_APP_BASE_URL || 'testA'}/`, 
  // 构建好的文件输出到哪里
  outputDir: process.env.VUE_APP_BASE_URL || 'testA',
   // 打包文件名称
  assetsDir :'static',
  lintOnSave: true, 
  // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  runtimeCompiler: false, 
  // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖

  transpileDependencies: [
    /* string or regex */
  ], 
  // 是否为生产环境构建生成sourceMap?

  productionSourceMap: false, 
  /* 调整内部的webpack配置. 设置引用路径变量
  *例如:import {xxFn} from 'src/api'  可以改为 import {xxFn} from '$api'
  */
  chainWebpack: (config) => {    
    config.resolve.alias
    .set('$common',resolve('src/commons'))
    .set('$xbj',resolve('src/views/xbj'))
    .set('$api',resolve('src/api'))

  },

  configureWebpack : {
    // output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
    //   filename: path.posix.join('static',`js/[name].[hash].js`),
    //   chunkFilename: path.posix.join('static',`js/[name].[hash].js`)
    // },
  }, 
  css: {
    // 将组件内部的css提取到一个单独的css文件（生产环境:true  开发、测试环境：false）
    // 也可以是传递给 extract-text-webpack-plugin 的选项对象
    extract: process.env.NODE_ENV==="production", 
    // extract: true, 
    // 允许生成 CSS source maps?
    sourceMap: false, 
    // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }

    loaderOptions: {
      sass :{
        data:sassData
      }
    }, 

    modules: false
  }, 

  parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

  pwa: {}, // configure webpack-dev-server behavior

  devServer: {
    open: process.platform === "darwin",
    disableHostCheck: false,
    host: localhost,
    port: 8088,
    https: false,
    hotOnly: false, 
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
    proxy: null // string | Object
    // before: app => {}
  }, // 第三方插件配置
  pluginOptions: {
    // ...
  }
};

5）动态设置api路径

src文件下创建api文件，新建baseUrl.js 、config.js 、index.js 三个文件

/*
*baseUrl.js
*/
let host = `https://${process.env.VUE_APP_APIPATH}.labifenqi.com/`,
	ORDER = 'order';
export {host,ORDER}

/*
*config.js
*/
import axios from 'axios'
import {host} from './baseUrl';
axios.defaults.timeout = 30000; //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';  //配置请求头
//配置接口地址
axios.defaults.baseURL = host;

//请求前拦截
axios.interceptors.request.use((config)=>{
  return config
});

//请求后后拦截
axios.interceptors.response.use((res) => {
  return res
});

//请求前
export function fetch(url, params,type) {
  return new Promise((resolve, reject) => {
    if(type=='post'){
      axios.post(url, params)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
    } else if(type == 'get'){
      axios.get(url,{params})
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
    }
  })
}

/*
*index.js
*/
import {fetch} from './config';
//ORDER 是根据 baseUrl 文件定义的变量随便写的，可根据自己需求设置
import {ORDER} from './baseUrl';

export default {
  getOrderList(params){return fetch(`${ORDER}/list`,params,'get')}
}

6）不需要根据环境，变换样式可以跳过

创建多个全局scss文件，对应步骤4 中css设置部分 testA.scss 、testB.scss

//assets/css/testA.scss
$urlPath:'/testA';

//assets/css/testB.scss
$urlPath:'/testB';