vue项目打包加固定前缀（包括路由和静态资源）

---

场景

项目不在根节点部署时，需要使用前缀进行访问。

---

思路

打包时更改路由和静态资源相关配置。

---

一、路由

1. 增加config/basePath.js文件，在其中封装basePath

config/basePath.js

module.exports = {
  prefixBasePath: '/prefixPath'
}

2. 修改config/index.js

config/index.js

//引入basePath
const { prefixBasePath } = require('./basePath')
const baseUrl = prefixBasePath

//新增代理内容对象
const proxys = {
  // 用户登录/退出
  loginApi: 'http://192.168.1.144:8190/',
  // 通用数据
  publicApi: 'http://192.168.1.144:8190/',
  // 增加超时时间设置
  dataTimeOutApi: {
    port: 'http://192.168.1.144:8190/',
    times: 1200000
  },
}
function proxyTable(apiList) {
  let proxyTable = {}, tableKey = "", isObj = false
  for (var key of Object.keys(apiList)) {
    tableKey = baseUrl + '/' + key
    isObj = apiList[key] instanceof Object
    proxyTable[tableKey] = {
      target: isObj ? apiList[key].port : apiList[key],
      changeOrigin: true,
      xfwd: true,
      pathRewrite: {
        [`^${tableKey}`]: ""
      },
      onProxyReq(proxyReq, req, res) {
        //req中默认是携带有x-forwarded-for请求头的，只需添加X-Real-IP请求头
        req.headers['X-Real-IP'] = req.ip
      }
    }
    // 增加超时时间设置
    if (isObj) {
      proxyTable[tableKey].timeout = apiList[key].times
    }
  }
  // console.log(proxyTable)
  return proxyTable
}
// 使用
proxyTable()
//修改配置
module.exports = {
  dev: {
    assetsPublicPath: baseUrl + '/',
    proxyTable: proxyTable(proxys),
  },
  build: {
    assetsRoot: path.resolve(__dirname, '../dist' + baseUrl),
    assetsSubDirectory: 'static',
    assetsPublicPath: baseUrl + '/',
  }
}

3. src/router/index.js全局路径加前缀

src/router/index.js

//引入basePath
const { prefixBasePath } = require('../../config/basePath')
//设置base
const router = new Router({
  base: prefixBasePath,
  mode: 'history',
  routes: []
})

4. src/common/js/http.js给全局的axios对象配置baseURL，使请求路径前增加前缀。

src/common/js/http.js

//引入basePath
const { prefixBasePath } = require('../../../config/basePath')
//设置axios的baseURL（两种任选一种）
axios.defaults.baseURL = `${prefixBasePath}`;
axios.defaults.baseURL = prefixBasePath;

5. src/common/mixins/public.js增加全局变量

src/common/mixins/public.js

const { prefixBasePath } = require('../../../config/basePath')
export default {
  data() {
    return {
      // 用于代码中写死的的静态资源地址/后端返回的附件地址
      staticUrl: `${prefixBasePath}`,
      // 或
      staticUrl: prefixBasePath,
    }
  }
}

---

二、静态资源（src/assets/scss/）

1. 增加basepath.scss文件，在其中封装prefixBasePath​

basepath.scss

$prefixBasePath: '/prefixPath';

2. 同级目录中的scss文件可以直接使用$basePath变量

提示：scss文件夹中文件全部读取的情况下
build/utils.js （vue中使用scss）

return {
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass').concat({
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/scss/*.scss')
    }
  }),
}

public.scss

$static_imgUrl: $prefixBasePath + "/static";

echarts.scss

$BI_imgUrl: $prefixBasePath + "/static/images/echarts/";

3. 单个scss文件引入basePath.scss

@import '../scss/basePath.scss'
$static_imgUrl: $prefixBasePath + "/static";

---

三、nginx部署时代理需添加前缀

nginx.conf

http {
  server {
    location ^~/prefixPath/loginApi/ {
      proxy_pass   http://127.0.0.1:8190/;
      proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
  }
}

---