CDN部署Vue应用时如何实现路由懒加载并正确请求静态资源？

问题修复方案 #

1. 解决首屏强制加载所有懒加载资源问题 #

直接删除app.blade.php中手动引入的非基础资源的script、link标签。懒加载的chunk是由webpack运行时自动按需加载的，不需要提前在页面中声明，你只需要保留核心入口资源即可：

<head>
<link rel="stylesheet" href="{{config('app.asset_url') . '/css/app.css'}}">
<link rel="stylesheet" href="{{config('app.asset_url') . '/css/chunk-vendors.css'}}">
</head>
…
<script src="{{config('app.asset_url') . '/js/chunk-vendors.js'}}"></script>
<script src="{{config('app.asset_url') . '/js/app.js'}}"></script>

像product.js这类路由懒加载生成的chunk完全不需要手动引入，访问对应路由时webpack会自动加载。

2. 解决懒加载chunk请求域名错误问题 #

这个问题的核心是webpack不知道你的静态资源部署的根地址，默认会用当前页面的域名拼接资源路径。你需要在vue.config.js中配置publicPath，指定静态资源的加载根路径：

// vue.config.js
module.exports = {
    // 核心配置：指定静态资源的根路径，可通过环境变量灵活适配开发/生产环境
    publicPath: process.env.VUE_APP_ASSET_URL || 'http://localhost:8080',
    devServer: {
        host: "0.0.0.0",
        disableHostCheck: true,
        port: '8080'
    },
    chainWebpack: config => {
        if (config.plugins.has('extract-css')) {
            const extractCSSPlugin = config.plugin('extract-css')
            extractCSSPlugin && extractCSSPlugin.tap(() => [{
                filename: 'css/[name].[contenthash:8].css',
                chunkFilename: 'css/[name].[contenthash:8].css'
            }])
        }
    },
    configureWebpack: {
        output: {
            filename: 'js/[name].[contenthash:8].js',
            chunkFilename: 'js/[name].[contenthash:8].js'
        }
    }
}

配置完成后，webpack打包的所有资源（包括懒加载chunk）都会自动拼接你配置的publicPath作为前缀，就不会再请求Laravel的域名了。生产环境打包时传入对应Netlify站点地址的环境变量即可，不需要修改代码。

CDN场景优化方案 #

如果要解决静态资源缓存、避免手动同步资源路径的问题，可以采用以下优化方案：

• 保留文件名的contenthash后缀，解决浏览器静态资源缓存过期问题，不需要用户强制刷新就能加载最新资源
• 打包时开启webpack的Manifest插件，生成asset-manifest.json文件，里面会记录所有入口资源的真实文件名
• Laravel侧每次部署时拉取前端打包生成的asset-manifest.json，读取核心入口的js、css路径动态注入到blade模板中，不需要手动修改blade代码

内容的提问来源于stack exchange，提问作者Tanmay