Vue2 怎么配置才能使输出文件是网络位置?

我们现在静态资源是放 阿里 OSS 上的。之前做 React 开发的时候使用的 UMI 框架。有个很好的功能,打包是正常的,文件生成都是在本地。但是 html 文件里面的静态文件位置都是阿里云 OSS 前缀的。

请问 VUE 怎么配置才能实现这种功能 ?

@vue/cli好像没有提供这个功能。其实可以自己写这块的功能。使用node上传文件到阿里云的oss,拿到url,然后在index。html中替换相应的地址

不是这个意思。我的意思是,打包所有的都是正常的。包括图片,也都在本地。只有 index.html 里面的链接变了。

设置baseur???

由于 vue-cli 把 publicPathbaseUrl 归一化了,现在要实现区分两者的功能得手动实现。
首先创建一个 .env 文件写入

VUE_APP_BASE_URL=/
VUE_APP_CDN_URL=https://www.example.com/

VUE_APP_BASE_URLvue-router 进行路由时会携带上的基础路径
VUE_APP_CDN_URL 是资源文件打包后将附加上的路径(需要/结尾)

接着在 vue.config.js 写入

module.exports = {
    // ...
    publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_CDN_URL : process.env.VUE_APP_BASE_URL,
};

process.env.NODE_ENV === 'production' 这句区分开发环境和生产环境,原因是如果在开发环境给资源文件附加上网络路径将会是场噩梦。

接着还要处理创建路由时所传入的 base 选项,
new VueRouter() 的选项中替换

new VueRouter({
    // ...
    // base: process.env.BASE_URL,
    base: process.env.VUE_APP_BASE_URL, // 改为在 .env 中定义的环境变量
})

虽然前面在 vue.config.js 区分了开发和生产环境是否要附带网络地址,但是 process.env.BASE_URL 实际上是从 vue.config.js 里的 publicPath 得来的。一旦处于生产环境那么 process.env.BASE_URL 也将会被写入成网络路径,这种情况下 new VueRouter()base 选项继续传入 process.env.BASE_URL 将带来灾难性的结果——任何跳转行为都将携带上网络路径。这显然是要避免的结果,所以将 base 传入值改为 process.env.VUE_APP_BASE_URL 或者直接传入 ‘/’ 之类的值是有必要的。

完成这三步后就能实现正常开发,并且 build 出的资源路径是携带上网络位置的。

还有一点值得注意的问题: public/index.html 里的相对路径例如 href="favicon.ico" 应该换为 href="<%= VUE_APP_BASE_URL %>favicon.ico" ,如果需要使用的是网络位置则是 href="<%= VUE_APP_CDN_URL %>favicon.ico"