备忘

vue项目引用资源和配置axios请求路径

无论什么router模式、和是否在vue.config.js中配置publicPath以便部署在子目录下,这个方法一定适用:

使用process.env.BASE_URL,获取publicPath的绝对路径!

例如,若vue.config.js中有publicPath = '/someProj',则在vue项目中的任何地方,process.env.BASE_URL都可以得到/someProj/

因此建议无论是相对资源、还是axios的base,都与process.env.BASE_URL锚定!

1
2
3
4
5
6
7
8
9
10
11
<template>
<img :src="`${publicPath}qwq.png`" />
</template>

<script>
export default {
data: function () {return {
publicPath: process.env.BASE_URL
}}
}
</script>
1
2
3
4
5
6
7
import VueAxios from "vue-axios"
import axios from "axios"
// 假设后端都在vue的publicPath目录的api子目录下。这种情况只发生于前端静态文件的分发是由后端服务器本身完成的情况下。
axios.defaults.baseURL = `${process.env.BASE_URL}api`
// 假如后端与前端静态文件使用不同的子目录(即前端静态文件使用其他的WebServer,如Nginx或dynamicApi进行分发,而不是用后端server本身进行
// 分发)的话,就不必这样做了,直接用绝对的路径如`/someProjApi`就好。
Vue.use(VueAxios, axios)

可行方式表

表格中,依次表示后端的BASE_URL的配置方式:绝对引用、相对引用、根据publicPath引用,是否可行

根目录 子目录,后端在不同的目录 子目录,后端在位于前端目录下的孙子目录
history YNY YNY NNY
hash YYY YYY NYY

表格中,依次表示相对资源的配置方式:绝对引用、相对引用、根据publicPath引用,是否可行

根目录 子目录
history YNY NNY
hash YYY NYY

结论:

  • 根据publicPath引用永远可行
  • 相对路径是否可行,只取决于是否history模式。history模式相对路径一定不可行,hash模式则一定可行!
  • 绝对路径是否可行,要看要访问的路径是否“已知”。即对后端来说确定了目录名的情况就可以用绝对,反之如果作为前端子目录的孙子目录、由于前端子目录未知
    所以自己的目录也就无法知道了。对于前端来说则有根路径就是已知的,反过来如果没有根路径可供部署、只能部署到子路径,那么就是未知的。

利用dynamicApi,部署前端到子目录、后端到孙子目录的示例:

1
2
3
4
5
6
7
8
9
10
11
12
// someProj.js
var express = require("express")
var path = require("path")
var router = express.Router()
router.use("/api", (req, res, next) => {
res.json({u: req.url}) // 后端,作为前端someProj路径的孙子路径,通过 /someProj/api访问
})
router.use(express.static(path.join(__dirname, '../hhh'))) // 在/someProj url下,serve hhh目录下的前端静态文件
router.get("*", ((req, res, next) => res.sendFile(
path.join(__dirname, "../hhh/index.html") // 如果没有对应的静态文件,404 falllback到index.html。
)))
module.exports.default = router