Vue项目（vue-cli 3/4）当我在CDN上托管静态文件时，延迟加载路由无法到达静态文件答案

【问题标题】：Vue project(vue-cli 3/4) lazy loading route can not reach static file when I host static files on CDNVue项目（vue-cli 3/4）当我在CDN上托管静态文件时，延迟加载路由无法到达静态文件
【发布时间】：2020-09-21 07:19:23
【问题描述】：

例如：

在https://my-site.com/my-path/ 上托管我的页面
将 vue.config.js 的 publicPath 设置为 /my-path/
在https://static.my-site.com/ 上托管静态文件

当我使用延迟加载路由时，该路由会尝试在https://my-site.com/my-path/js/xxxxx.js 上加载文件，但我的静态文件托管在 https://static.my-site.com 上，因此会引发 404 问题。

我该如何解决这个问题。

【问题讨论】：

静态资产的路径应该是什么？是https://static.my-site.com/js/xxxxx.js 还是https://static.my-site.com/my-path/js/xxxxx.js？

标签： vue.js

【解决方案1】：

这里有两件事要做......

将您的 publicPath 设置为静态站点基本 URL

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === "production"
    ? "https://static.my-site.com/"
    : "/"
}

将路由器的 base 设置为应用的基本路径

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

const router = new VueRouter({
  base: process.env.NODE_ENV === "production"
    ? "/my-path/"
    : "/",
  routes: [...]
})

【讨论】：

【解决方案2】：

您可以在 import 语句中使用绝对位置

【讨论】：