VUE项目修改项目名后发布,加载js失败?

(1)找到项目下build文件夹里的打包配置文件:webpack.prod.conf.js,修改发布路径:

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    publicPath:'/TS/'
  },

(2)修改package.json、package-lock.json配置里的name

{
  "name": "TS",
  "version": "1.0.0",
  "description": "test",

重新编译下就OK了,我在其他网站上看到的方法并不可靠,说要重新安装一遍插件,后来我通过在builderX中全文搜索,找到了第一点中的发布路径,这个路径应该是告诉HTML去那个路径下找js等文件的。

 

### 3.1 静态资源路径问题的解决方式 在 Vue 项目部署后,图片资源无法加载通常是由于静态资源路径配置不当引起的。在默认情况下,Vue CLI 使用 Webpack 将小于 10KB 的图片转换为 base64 编码,而较大的图片则保留为文件并生成相对路径。如果路径配置不正确,这些文件可能会加载失败[^1]。 为了解决此类问题,可以在 `vue.config.js` 文件中调整图片的处理规则。例如,通过修改 `limit` 参数来控制图片转换为 base64 的大小限制: ```javascript module.exports = { chainWebpack: config => { config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .use('url-loader') .loader('url-loader') .options({ limit: 4096, // 将 4KB 以下的图片转为 base64 name: 'img/[name].[hash:8].[ext]' }); } }; ``` ### 3.2 静态资源路径配置 如果项目部署到服务器后出现路径错误,如 `/static/css/static/img`,这通常是因为相对路径的写法在不同部署环境下导致的问题。为了解决这个问题,可以调整 `publicPath` 的设置。在 `vue.config.js` 中设置 `publicPath` 为 `'../../'` 可以帮助解决路径问题[^2]。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '../../' : '/' }; ``` ### 3.3 动态生成图片路径 对于通过 JavaScript 动态创建的图片对象,如果使用相对路径加载失败,可以通过拼接当前页面的主机和路径来生成正确的图片路径。这种方法适用于只有一两张图片加载失败的情况[^3]。 ```javascript var image = new Image(); var hostIPAndPort = window.location.origin; var pathName = window.location.pathname; image.src = hostIPAndPort + pathName + 'static/personInfo/person.png'; ``` ### 3.4 中文文件问题 在部署 Vue 项目时,如果某些静态资源图片不加载,可能是由于服务器对中文文件的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符,导致无法正确找到文件路径。将图片文件为英文通常可以解决这个问题[^4]。 ### 3.5 服务器配置 确保服务器配置正确,尤其是对于静态资源的处理。对于 Nginx 或 Apache 服务器,需要确保静态资源目录的配置正确,并且服务器能够正确地解析和提供这些资源。 ### 3.6 部署测试 在部署后,应进行充分的测试以确保所有资源都能正确加载。使用浏览器的开发者工具检查网络请求,确认资源路径是否正确,以及是否有任何加载错误。 ### 相关问题 1. Vue 项目部署到 Nginx 后如何配置静态资源路径? 2. 如何解决 Vue 项目部署后图片资源无法加载的问题? 3. 如何在 Tomcat 上部署多个 Vue 项目? 4. 在 Apache 服务器上如何为 Vue 项目配置虚拟主机? 5. Vue 项目部署到服务器后访问 404 错误如何解决?
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值