Npm run build 打包之后打开dist的index.html报静态资源路径错误

最新推荐文章于 2024-06-16 01:08:56 发布
最新推荐文章于 2024-06-16 01:08:56 发布
阅读量740 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32741973/article/details/115549777
版权

解决方法一.修改config下的assetsPublicPath的 '/' 为 './'，重新npm run build,再打开dist的index.html

 

解决方法二：安装一个http-server在本地开启一个本地的服务器，assetsPublicPath的 '/'不用加.

 

 

 

Gao++
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue打包npm run build时候界面报错的解决
11-20
用coding-pages打开后显示Failed to load resource: the server responded with a status of 404 (Not Found)， 解决方案： 方案一： 找到config里的index.js,打开修改assetsPublicPath 为“./” 方案二： 或者把index.html文件中的路径/去掉； 下面是去掉后的，可以参考下 成功了！ 补充知识：启动vue项目 npm run dev 时报errno -4058 进入到项目目录下，shift+右键 打开cmd 执行 npm install 然后再执行 npm ru
vue-cli webpack打包后index.html引入文件没有引号
i_coffer的博客
07-11 6627
在对vue-cli项目打包后出现index.html引入的css和js没有引号 即：<link href=/css/xxx.css rel="stylesheet">解决办法：找到webpack.prod.conf.js，在webpack.prod.conf.js找到minify把minify中的  removeAttributeQuotes: true改为 removeAttribu...
windows IIS上部署Vue项目
最新发布
weixin_41934979的博客
06-16 660
IIS上部署Vue项目
安装插件报错--npm run build 打包时，文件路径可能出错
hkduan的博客
03-15 2938
npm run build 打包时，文件路径可能出错。 在浏览器chrome中报错，路径错了。 可以修改vue.config.js，如果没有这个文件，可以手动添加，放在package.json同级 module.exports = { /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ ...
VUE2打包后，dist文件里边的index.html，在浏览器中打开是空白的？
zsm__zsm的博客
02-28 477
VUE2打包后，dist文件里边的index.html，在浏览器中打开是空白的？
打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
weixin_35647799的博客
06-30 1707
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题2018年05月23日 10:05:35for_weber阅读数：14179Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。问题一：我在打包完成后...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
vue本地打开build后生成的dist文件夹index.html问题
12-08
更改一些路径参数后，然后再次运行npm run build 就可以在本地打开index.html 改哪里？ config/index.js文件 build: { assetsPublicPath: '/' } 改成 build: { assetsPublicPath: './' } 修改后再次运行 npm ...
解决vue项目,npm run build后,报路径错的问题
10-14
总结，解决Vue项目`npm run build`后报路径错误的问题，主要涉及`webpack`配置中的`output.publicPath`、`config.index.js`中的`build.assetsPublicPath`以及正确处理CSS样式覆盖和资源引用。理解这些配置和技巧，能...
解决vue 项目使用webpack打包后，直接打开dist文件夹下的index.html页面空白的问题
sinat_41501316的博客
07-09 5450
问题描述 vue项目完成后，输入npm run build命令，会生成dist文件，本地打开dist/index.html，一般页面为空，或者报错找不到css和js文件，则需要更改一些路径参数，改成相对当前目录，然后再次运行npm run build 就可以在本地打开index.html。 解决办法 修改1：将config/index.js文件的assetsPublicPath: ‘/’; 改为assetsPublicPath: ‘./’; 修改2：将build/webpack.base.confg..
vue打包后dist目录直接打开index资源路径错误和css样式背景图路径问题
dianmin8765的博客
09-19 252
config/index.js build: { assetsPublicPath: './' } build/utils.js function generateLoaders (options) { ... if (options.extract) { return ExtractTextPlugin.extract({...
HTML 和静态资源
xiaomifeng_li的博客
11-21 1431
HTML Index 文件 public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。 ...
Vue 解决 npm run build 后 index.html 不能直接运行的问题
fukami666的博客
04-20 3236
Vue 解决 npm run build 后 index.html 不能直接运行的问题一、开发环境二、遇到的问题1.在浏览器中打开 dist 目录下的 index.html2.开发工具中打开 index.html解决方案1.简单粗暴的办法2.一劳永逸的办法总结1.找到配置文件2.添加配置项目3.在【package.json】中配置4.大功告成！ 一、开发环境 Vue版本2.6.11 （想看解决方案的同学可以直接跳到总结） "scripts": { "serve": "vue-cli-service
vue修改index.html无效,『vue踩坑日常』 在index.html中引入静态文件不生效
weixin_33520865的博客
06-04 842
Vue日常踩坑日常 —— 在index.html中引入静态文件不生效问题本文针对的是Vue小白，不喜勿喷，谢谢出现该问题的标志如下控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html) 出现的原因及解决办法第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把...
vue项目打包后路径问题
weixin_43756060的博客
03-14 2177
第一步： 选择第二项Manually手动选择特性 第二步 选择Babel / Router / Vuex / Linter/Formatter 整体选项如下 选择完成后回车根据提示进行下一步操作 执行完这些后我们另外打开一个命令行窗口运行npm run build会发现目录下多出个dist目录，但是目录中的index.html并不能正常运行,因为引入的js/css文件路径都不对； 为了能让...
vue 网络请求报跨域的问题怎么解决？npm run build 打包后图片资源不能访问解决方法？要加publicPath.
weixin_44166439的博客
02-07 759
参考路径：https://cli.vuejs.org/zh/config/#devserver-proxy 创建一个和package.json同级的文件名称为vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://ustbhuangyi.com/', // 目标服务器 changeOrigin: true, // 是否改变这个源 p
vue使用rpm run build打包后dist文件夹点击index.html出现跨域问题
weixin_45688580的博客
07-26 1697
vue使用rpm run build打包后dist文件夹点击index.html出现跨域问题
Vue.js工程打包静态网页提示CORS问题的解决方案
进击的小宇宙
12-19 4390
一、 问题描述 今天打包Vue.js工程，然后用浏览器打开index.html，发现引用的一些UI资源加载不出来，包括字体和icon等，打开控制台提示跨域请求问题。 二、 解决方案 在原始工程的index.html中，head标签下，增加一个meta标签： <meta http-equiv="Access-Control-Allow-Origin" content="*&q
vue笔记（一）
qq_44733345的博客
10-13 154
1.vue3安装 由于npm安装速度慢，所以是用淘宝镜像及其命令cnpm，使用淘宝定制的cnpm命令工具代替默认的npm $ npm install -g cnpm --registry=https://registry.npm.taobao.org 使用cnpm命令安装模块 $ cnpm install [name] 2. npm版本升级 # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm i
vue项目打包之后打开dist/index.html一片空白
05-23
这个问题可能有多种原因，以下是一些可能的解决方案： 1. 确保在打包之前运行了正确的命令。一般来说，打包 Vue 项目需要运行 `npm run build` 命令。如果你使用的是 Vue CLI，则可以使用 `vue-cli-service build` 命令打包。 2. 确保在打包之前配置了正确的 publicPath。在 Vue CLI 中，可以在 `vue.config.js` 文件中配置 publicPath。如果你没有配置 publicPath 或者配置错误，那么在打开 index.html 文件时可能会出现问题。 3. 确保你正确地部署了静态资源。如果你在项目中使用了静态资源（如图片、CSS 文件等），则需要将这些资源和打包后的 JavaScript 文件一起部署到服务器上。如果这些资源没有被正确地部署，那么在打开 index.html 文件时可能会出现问题。 4. 检查浏览器的控制台输出。在打开 index.html 文件时，可以打开浏览器的控制台，查看是否有任何错误或警告信息。这些错误或警告信息可能会提示你打包出现了什么问题。 5. 检查 index.html 文件中的路径是否正确。打包后的 index.html 文件中的路径可能需要手动修改，以便正确地引用打包后的 JavaScript 文件等资源。例如，如果你将打包后的 JavaScript 文件放在了一个名为 `assets` 的文件夹中，那么你需要将 index.html 文件中的引用路径修改为 `assets/js/app.js` 等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值