vue import 静态文件失败

最新推荐文章于 2023-11-09 17:23:12 发布
最新推荐文章于 2023-11-09 17:23:12 发布
阅读量876 收藏
点赞数
分类专栏： vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vagabond_/article/details/115828286
版权

vue import 静态文件失败

问题分析

在前端项目中经常碰到写了静态文件使用import 引入，再本地运行是可以但是打包上线后就发现修改配置静态文件页面获取的数据没有变化，这是因为静态文件再打包的时候没有被编译，不被编译的代码识别不了es6写法

解决方案

1.按照原生的方法再index.html页面使用script引入
2.使用接口的方式访问静态文件

vagabond_
关注
专栏目录
vue引入静态js文件的方法
10-15
在Vue.js应用中引入静态JavaScript文件是常见的需求，特别是在处理一些全局配置或者第三方库时。以下将详细讲解如何在Vue项目中引入静态JS文件，包括针对不同Vue CLI版本的处理方式，以及避免常见错误的方法。 首先...
vue引用public文件夹中文件
无心使然云中漫步
12-13 7104
可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。可以看到，虽然有警告，但是/public中的js文件，在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的，但是js文件内容已经被引入到当前js中了，test.js也不会影响。
vue 图片资源应该如何存放并引入（public、assets）？
热门推荐
Start2019
02-18 3万+
两者存放什么图片，什么时候使用，在某种情况下应该使用哪种方式； 使用方式； 图片路径转换；
五-2、vue中引用文件路径问题
qq_23135259的博客
02-09 7155
vue中引用文件路径问题，vue中给div设置style
vue.config.js 全局配置
轻风细雨_林木木
03-20 2万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
详细记录前端项目使用import懒加载组件打包失败的踩坑之路
yorcentroll的博客
06-07 3106
最后还是回到babel.config.js文件,尝试把这个配置删了'@vue/cli-plugin-babel/preset'，奇迹出现了，果然成了。
vite vue3 import.meta.glob动态路由
最新发布
03-29
在这个例子中，`import.meta.glob`会遍历`./views`目录下所有的`.vue`文件，并返回一个Promise，该Promise解析为一个对象映射，键是相对路径，值是对应的模块。我们遍历这个映射，将每个路由组件添加到`routes`数组...
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
在Vue CLI 3中，管理项目中的静态文件是开发者经常遇到的任务。`public`目录是Vue CLI 3为处理静态资源而设计的一个特殊位置。它主要用于存放不会被webpack处理的文件，比如图片、字体文件或者HTML文件。这篇文章将...
解决vue的router组件component在import时不能使用变量问题
10-15
在ES6中，静态导入如`import MyComponent from './MyComponent.vue'`是在编译时解析的，这意味着它不接受运行时的变量。因此，尝试像这样动态导入组件是无效的： ```javascript let componentName = 'MyComponent';...
Vue打包后访问静态资源路径问题
10-16
3. **使用`require`引入**：对于需要在JavaScript中使用的静态资源，可以通过`require`或`import`语句引入，Vue CLI会自动处理路径。 4. **使用`publicPath`选项**：在Vue配置文件`vue.config.js`（如果不存在，...
Vue-cli3+打包懒加载失败原因
qq_37028216的博客
02-08 1396
最近在梳理以vue-cli3为基础的几个项目的脚手架，发现其中一个项目在打包时通过() => import动态导入的文件不会生成单个chunk文件。 从babel版本, webpack版本， babel插件各个角度都无效，冷静下来分析，一定是babel上的问题，而vue-cli4的babel.config.js中preset使用的是@vue/cli-plugin-babel/preset， 因此顺腾摸瓜去找源码看逻辑，最终找到了关键文件 @vue\babel-preset-app\index.js
Webpack-Vue 分片优化——为什么使用懒加载() =＞ import() 里面的组件没有分片打包
japlus的博客
10-09 3049
环境 vue2,webpack3 公司的vue项目需要做一下前端优化，主要问题是网页首屏加载缓慢。 作为单页应用的vue，往往是第一次加载时间会稍长，后续由于利用浏览器缓存，再次打开就快了。且单页应用将页面都打包到一个js（一般是app.js）文件中，在路由跳转的时候不会有闪屏，通过js动态渲染页面元素，无需发起额外的请求获取页面。 但是，为什么还要优化呢—— vue 遇见了iframe 此次我收到的项目是作为其他项目的内嵌形式来加载的，没错，就是iframe。这个项目通过js来控制iframe，
vue项目引入echart地图和使用public文件的json数据
那片枫叶~
07-08 2208
vue项目引入echart地图和使用public文件的json数据 最近是要做一个echart地图，然后看了社区别人的例子，发现都是要请求一条接口。获取全国的json数据，设置给map，我是vue项目，axios设置了过滤不想再写一次，所以去官网的demo复制network的json文件，然后对于怎么使用public下的文件和 复制network的数据踩坑了，在这做下笔记，本人是菜鸟一个。。。 1、先说下network复制json数据，我是从network 复制links地址再去浏览器下载，一开始我是
Vue 动态加载public图片和图片预览例子
漫—流的博客
07-11 7072
一、vue 静态资源文件夹 Vue 有两个存放静态资源的文件夹：assets和public。 1、 assets文件夹 使用require()方法加载静态资源，如： require('./assets/image/success.png') 这里的文件经过webpack处理过的，require方法的参数不支持变量，只能存文件的路径，因此加载图片时不能动态获取。 2、public文件夹（以前vue1.0版本叫static） public文件夹的文件是不经过webpack处理，打包时直接把public复制到打
webpack打包vue时import vue失败问题
a_little_nine的博客
06-20 1265
在最近使用webpack打包vue的时候，在引入vue的时候出现了问题。 JavaScript代码： import Vue from 'vue' new Vue({ el:'#app', template:` <div> {{name}} </div> `, data:{ name:"544444444444" } }) HTML代码： <body> <div id="app"></div&gt
【傻瓜式教学】Vite项目中静态资源路径处理（打包后线上环境无法显示静态资源）
小安驾到的博客
11-09 5060
适用场景： img标签是通过v-for动态指定src路径的，本地可以正常显示，一旦打包之后就无法在线上显示了。 Bug原因： Vite打包只会处理静态src路径，动态src路径只会原样保留。
vue前端项目中怎么将静态资源public中内容引入
m0_47634044的博客
07-08 6860
在页面资源或者其他文件夹下的资源，我们可以通过相对路径的方式进行引用，例如“…/user/index.js”就表示在当前文件位置的上一级目录下的index.js文件。那么我们在一个vue项目中将公共的一些图片资源或者其他资源存的时候，通过相对路径就过于复杂了。可以参考下面这种写法。 获取public下的图片文件夹中一张图片。 src=“ ”一个斜杠就表示资源定位到public下......
两种Vue引入全局js的方式以及使用方法
qq_39894545的博客
08-23 1188
main.js // 两种使用方式 // 全局js this.pubilcJs.xxxx 第一种 import _pubilc from './common/js/public.js'; Vue.prototype.pubilcJs = _pubilc; //全局js this.xxxx 第二种 import publicJS from '../static/public/publicJS.js'; Vue.use(publicJS); 第一种js文件写法 export defa...
【前端】Vue页面无法使用import的方法
我是Superman丶的博客
09-17 869
Tool:Tool //需要在这里重新定义一下 否则会报错。在data里重新定义一个属性。
vue 下载本地静态文件
05-22
你可以使用Vue.js中的axios库来下载本地静态文件。 首先，需要在Vue.js项目中安装axios库，可以使用以下命令进行安装： ``` npm install axios --save ``` 然后，在需要下载文件的组件中，可以使用以下代码： ```javascript import axios from 'axios' export default { methods: { downloadFile() { axios({ url: '/path/to/file', method: 'GET', responseType: 'blob', }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file.pdf'); document.body.appendChild(link); link.click(); }); }, }, }; ``` 在上面的代码中，我们使用axios发送一个GET请求来获取文件的二进制数据，并将`responseType`设置为`blob`，以便于处理响应数据。 接着，我们创建一个URL对象并将响应数据包装成一个Blob对象，然后创建一个下载链接并将其添加到页面上。最后，我们模拟点击下载链接，以便将文件下载到本地。 注意，需要将`url`变量中的`/path/to/file`替换为实际文件的路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值