vue编译后静态文件的访问

最新推荐文章于 2024-07-06 09:03:33 发布
最新推荐文章于 2024-07-06 09:03:33 发布
阅读量1w 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cly153239/article/details/53019936
版权

npm run build后会生成静态文件，在根目录的dist里，里面有个index.html，这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对，这时候就需要自己修改一下配置了。


原先默认配置为



修改配置后：



访问http://127.0.0.1:8020/myvue/dist/index.html

慕容雪cly
关注
专栏目录
Vue打包后访问静态资源路径问题
10-16
在本篇文章里小编给各位整理的是关于Vue打包后访问静态资源路径问题相关知识点，需要的朋友们学习下。
VuePress 静态网站生成
weixin_34186931的博客
02-13 314
使用技术： VuePress - Vue 驱动的静态网站生成器 仓库地址：https://github.com/yinian-R/v... 全局安装 ## 安装 yarn global add vuepress # 或者：npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress，同时想要...
Vue 编译器（Vue Compiler）实现原理详解
最新发布
My_wife_QBL的博客
07-06 837
Vue 编译器的主要任务是将 Vue 模板转换为渲染函数。渲染函数是一个 JavaScript 函数，它返回虚拟 DOM 节点，用于描述 DOM 结构。通过渲染函数，Vue 可以高效地更新 DOM，实现响应式数据绑定和组件化开发。解析（Parsing）：将模板字符串解析为抽象语法树（AST）。优化（Optimization）：对 AST 进行静态分析和优化，标记静态节点和静态根节点。代码生成（Code Generation）：将优化后的 AST 转换为渲染函数代码。
VUE读取静态文件技巧
唯有热爱 可抵万难
03-04 757
现在有一个文件123.jpg在assets目录，我需要在bbb.vue里面去引用他，直接使用../方法无法获取该文件，且页面不能正常显示。
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问解决方法-直接打开访问是空白的解决方法
厚积薄发.
08-08 5428
在vue-cli项目中打包的 dist 静态文件不能直接双击打开访问-直接打开访问是空白的解决方法。这个就是以 http 协议来打开 网页。这样上面两种方法都可以打开打包好的 dist 下面的网页。vue-cli 默认的需要http协议才能打开，这里需要配置一行代码即可解决！如果不加，打开是空白的额，需要在服务器上，即使用 http 协议才能打开！......
vue打包后copy一些静态资源文件到dist，可通过url直接访问
qq_41596411的博客
09-24 4138
vue打包后copy一些静态资源文件到dist，可通过url直接访问 若打包后的dist文件里没有static文件，有些需求会想要访问到项目中的某些静态资源文件，而vue打包并没有把static文件打包进去，这就需要在打包后copy目标文件到dist里面 找到package.json文件，配置build如下"build": "vue-cli-service build && no...
vue引入静态js文件的方法
10-15
在Vue.js应用中引入静态JavaScript文件是常见的需求，特别是在处理一些全局配置或者第三方库时。以下将详细讲解如何在Vue项目中引入静态JS文件，包括针对不同Vue CLI版本的处理方式，以及避免常见错误的方法。 首先...
vue编译打包本地查看index文件的方法
08-27
本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`assetsPublicPath`参数的作用。 首先，确保你已经安装并配置了Vue CLI（Vue.js的命令行工具）。如果你还...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
vue 编译后的 js 文件解析
04-15
当你在Vue项目中完成开发并运行`npm run build`或`yarn build`命令后，Vue的构建过程会将源代码编译为优化过的JavaScript文件，这些文件通常包括多个chunk文件。例如，`chunk-5a9d6cfb.5d3c3254.js`就是一个编译后的...
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
这意味着，任何放置在`public`目录下的文件，如图片，都可以在最终构建后的应用中通过相对路径直接访问。 在Vue组件中引用`public`目录下的文件时，需要注意路径的正确书写。Vue CLI 3默认在HTML文件中插入一个`...
使用Vue.js构建静态网站的简约框架.zip
09-24
使用Vue.js构建静态网站的简约框架。.zip,()==[:> A static website generator for building blazing fast websites with Vue.js
VuePress 静态网站生成方法步骤
12-01
使用技术： VuePress – Vue 驱动的静态网站生成器 仓库地址：https://github.com/yinian-R/vuepress-demo 全局安装 ## 安装 yarn global add vuepress # 或者：npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress，同时想要在该项目中管理文档，则应该将 VuePress 安装为本地依赖。 ## 没有项目可以初始化 yarn init ## 将 VuePress 作为一个本地依赖安装 yarn add -D vuepress # 或者：npm insta
Vue打包静态资源本地访问（不用放在服务端）| 比如放在Android 应用中
汪随安的博客
05-13 6911
解决vue打包静态资源问题！一、 打包服务端访问资源，直接build就行了二、 打包成静态资源，build出问题啦！！ 一、 打包服务端访问资源，直接build就行了 打包成服务器访问的资源，是默认的打包方式，直接运行自带脚本npm run build,就可以将资源打包在dist目录下 打包好之后的文件为dist目录下的：static与index.html 打包完之后直接扔服务器上就行了，直接运行 二、 打包成静态资源，build出问题啦！！ 使用场景： 好比我写的是H5应用，放在浏览器上直接可以打开浏
vue3 静态资源加载
m0_50080847的博客
02-09 452
如 public 有image logo.png 引入时： src=‘/image/logo.png’将静态资源放到 public 文件下 引入的时候以 ’ / ’ 代替。
vue打包后本地模拟运行dist静态文件
FiveOKyo的博客
07-27 821
vue打包后本地运行dist静态文件
Vue3.0 源代码编译调试
liubangbo的专栏
01-12 1314
如果看Vue3.0源代码的话，最好是先搭建个单步跟踪调试环境，哪里有不清楚的地方可以在浏览器中单步跟踪一下。搭建源码调试环境步骤如下： 1. 首先要从github 上下载源代码， 这就不多说了 2. 在package.json 中"dev": "node scripts/dev.js --sourcemap", 加上 --sourcemap 参数，这样npm run dev 后编译出的源代码才可以调试 如果出现上图说明已经编译好了， 在vue-next/packages/v...
vue的模板编译，静态节点的要求
hhhh
05-03 696
模板编译，把用户写的模板进行编译，就会产生VNode 写在标签中的类似于原生HTML的内容称之为模板。
Vue cli - 3.0 编写模拟静态数据
_oTaku
09-08 509
Vue cli 3.0 如何 进行编写模拟本地数据进行模拟开发！ 1.首先 vue cli -3.0 已经没有生成state这个静态文件夹了，所以我们的静态资源应该存放哪里呢？ 应该存放在public里面，如下图，mock是我创建的存放json数据的一个文件夹，如图： 2.在mock里面创建相对应的json数据，在创建于package.json同级文件创建Vue.config.js文件， 3....
vue-cli 静态资源图片太大 编译后不展示
09-10
当使用vue-cli创建的项目中，如果静态资源图片太大，编译后可能不会展示的原因有多种可能性。以下是可能的解决方案： 1. 检查图片格式：确保图片文件格式正确，常用的图片格式通常为JPEG、PNG等。如果图片格式不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值