前端部署自动上传资源文件到cdn/oss 解决路由和访问慢的问题

参考文档:webpack-aliyun-oss-plugin - npm

安装依赖,这是一个预编译环境下的包

npm install webpack-aliyun-oss-plugin --save-dev

以下代码的意思是:

webpack中引入一个oss上传插件,并且给予其初始参数,插件根据publicPath提供的域名后的path,将打包的文件一个个按照上传到path对应的目录中,并且根据from的路径指示,将./dist/static下的所有文件都按路径上传

1,关键点一:/scrm/xxa/xxb 无论建立多少级,oss桶都是自动建立的,无需人手动先把这些目录建立了,例如上面的path对应oss的目录/scrm/xxa/xxb下面,./dist/static下的文件也会被上传到这个目录下,这个目录却不需要先行建立

publicPath: process.env.NODE_ENV === 'production' ? `https://static-global.uncledesk.com/${version_path}/` : '/',
  
chainWebpack: config => {
        config.resolve.symlinks(true); // 修复热更新失效
        // 如果使用多页面打包,使用vue inspect --plugins查看html是否在结果数组中
        config.plugin("html").tap(args => {
            // 修复 Lazy loading routes Error
            args[0].chunksSortMode = "none";
 
<think> 我们正在解决前端部署后require找不到资源问题。根据引用内容,我们可以从以下几个方面进行排查解决: 1. **静态资源路径配置**:在Vue项目中,通过`publicPath`设置基础路径。引用[2]中提到,生产环境可以设置为CDN路径,开发环境为'/'。引用[3]中设置`publicPath: './'`,这样资源会相对于当前路径加载。 2. **构建输出目录**:引用[3]中配置了`outputDir: 'dist'`(构建输出目录)`assetsDir: 'static'`(静态资源目录),这意味着构建后静态资源放在`dist/static`下。确保资源被正确打包到该目录。 3. **资源上传**:引用[2]中使用了`webpack-aliyun-oss-plugin`插件将`dist`目录下的资源上传到阿里云OSS,但排除了HTML文件。如果资源上传不完整或路径错误,可能导致require找不到资源。检查上传过程是否成功,以及上传后的资源路径是否与`publicPath`匹配。 4. **require使用方式**:在Webpack打包的项目中,通常使用`import`或`require`引入资源。如果资源路径是动态的,可能需要使用`require`的变量表达式,但Webpack可能无法解析动态路径。建议将动态路径限定在特定目录,并使用相对路径。 5. **路由模式**:如果使用history模式的路由,可能需要服务器配置(如Nginx)来正确处理资源请求。但问题聚焦在require资源,所以先检查构建配置。 **解决方案步骤:** 1. **检查`vue.config.js`配置**: - 确保生产环境的`publicPath`正确指向CDN或服务器上静态资源的根路径。如果资源部署在服务器子路径下,则设置为该子路径(如`'/myapp/'`)。 - 检查`assetsDir`设置,确保资源被打包到预期目录。 示例配置(引用[3]): ```javascript module.exports = defineConfig({ publicPath: './', // 或生产环境的CDN地址 outputDir: 'dist', assetsDir: 'static', // ...其他配置 }) ``` 2. **检查资源上传**: - 如果使用OSS,确认插件配置正确,且上传了所有必要资源(除HTML外)。引用[2]中的插件配置过滤了HTML文件,但其他静态资源(如JS、CSS、图片)应被上传。 3. **检查资源引入方式**: - 对于静态资源(如图片),建议放在`public`目录下,然后通过绝对路径引用(如`/img/logo.png`)。这样资源会被直接复制到输出目录,不经过Webpack处理,避免require问题。 - 对于需要Webpack处理的资源(如`src/assets`中的资源),使用相对路径。例如: ```javascript const image = require('./assets/logo.png') // 正确 ``` - 避免动态require变量,例如: ```javascript // 避免这样使用 const imageName = 'logo.png'; const image = require('./assets/' + imageName); // 可能导致找不到 ``` 如果必须动态加载,可以将资源放在`public`目录,然后使用绝对路径。 4. **检查构建结果**: - 运行`npm run build`后,检查`dist`目录结构,确认静态资源(如图片、JS文件)是否在`static`目录下。 - 打开生成的HTML文件,查看资源路径是否正确(如`<script src="./static/js/app.js"></script>`)。 5. **服务器配置**: - 确保服务器正确配置了静态资源目录。例如,Nginx配置: ```nginx location / { root /path/to/dist; index index.html; try_files $uri $uri/ /index.html; # 对于Vue路由history模式 } ``` **示例修复代码:** 假设问题是由于`publicPath`配置不正确导致,修改`vue.config.js`: ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? 'https://your-cdn-domain.com/static/' // 替换为你的CDN路径 : '/', outputDir: 'dist', assetsDir: 'static', // ...其他配置 } ``` 如果资源部署在服务器的子路径下(如`/myapp/`),则设置: ```javascript publicPath: '/myapp/', ``` 这样,所有通过Webpack处理的资源路径都会以该路径为前缀。 **注意事项:** - 修改配置后重新构建并部署。 - 确保CDN或服务器上的资源路径与配置一致。 通过以上步骤,应该能解决部署后require找不到资源问题[^1][^2][^3]。 </think> ### 解决前端部署后 `require` 找不到资源问题 #### 1. **静态资源路径配置问题**(最常见) 在 `vue.config.js` 中配置正确的 `publicPath`: ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? 'https://your-cdn.com/project-path/' // 生产环境用CDN路径 : '/' // 开发环境用根路径 } ``` > **原因**:部署资源路径变化,Webpack 无法定位资源。引用[2]中通过环境变量动态设置CDN路径可解决问题[^2]。 --- #### 2. **资源上传缺失问题** 若使用OSS/CDN,检查插件配置是否遗漏资源: ```javascript // vue.config.js config.plugin('webpack-aliyun-oss-plugin').use('webpack-aliyun-oss-plugin', [{ from: ['./dist/**/*'], // 确保包含所有资源 filter: (asset) => !/\.html$/.test(asset) // 排除HTML }]); ``` > **关键点**:引用[2]中的 `filter` 配置需确认是否误删了JS/CSS文件[^2]。 --- #### 3. **构建目录结构错误** 检查输出目录配置: ```javascript module.exports = { outputDir: 'dist', // 构建输出目录 assetsDir: 'static', // 静态资源子目录 indexPath: 'index.html' } ``` 部署资源路径应为: `https://domain.com/static/js/app.js` 而非错误的 `https://domain.com/dist/static/js/app.js`。 --- #### 4. **动态 `require` 路径问题** 避免动态拼接路径: ```javascript // ❌ 错误用法(Webpack无法解析变量) const imgPath = `./assets/${imageName}.png`; require(imgPath); // ✅ 正确用法(完整静态路径) require(`./assets/logo.png`); ``` > **原理**:Webpack 在编译时需要明确路径才能打包资源。 --- #### 5. **服务器路由配置问题** 添加Nginx回退规则(针对history路由): ```nginx location / { try_files $uri $uri/ /index.html; # 确保路由重定向 } ``` > **影响**:路由未配置会导致资源路径解析失败。 --- #### 6. **文件大小写敏感问题** 统一使用小写文件名: `require('./assets/icon.png')` 而非 `require('./assets/Icon.png')` > **注意**:Linux服务器区分大小写,引用路径需与实际文件名完全一致。 --- **总结解决步骤**: 1. 检查 `publicPath` 是否指向CDN/服务器正确路径 2. 确认OSS上传插件未过滤必要资源 3. 避免动态 `require` 路径 4. 验证服务器路由配置 5. 统一资源文件名大小写
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

森叶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值