vue引入assets和static静态资源问题

1、assets文件夹与static文件夹的区别

  assets文件是src下的,所以最后运行时需要进行打包,一般用来存放自己用到的静态资源;

  static文件不需要打包就直接放在最终的文件中了,一般用来存放第三方静态资源。

引入静态资源方法:js中用import,css中用@import url(...) ,index.html中用link(script)标签引入。

利用vue-cli脚手架搭建的webpack对各种文件的编译一般是配置好的。

2、遇到的问题

  第一次使用vue构建工具做项目,业余时间边学边做,好不容易大概懂了一点webpack配置,以及简单的vue路由、状态管理,开心的开始了我的单页面应用。在做了几个页面后,想放到服务器看看,于是进行了build,却被突如其来的报错搞懵逼了,在开发环境下,一切正常。error如下:

  

  首先确定是静态资源的问题,于是开始百度,结果搜到一大堆说是路径问题,其实和路径根本没关系,出现路径问题的要么是自己真的写错了,还有就是build成功了但是打开是空白页,这个命令行好像都提示说如果不在服务器环境根目录下是行不通的,所以这。。。我居然看了大半天牛头不对马嘴的问题;还有说是编译出了问题,什么css-loader、style-loader没配置好啊,或者没安装什么的,都怪我不懂webpack,其实init的配置这些都是配置好的,如下图

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders(‘less‘),
    sass: generateLoaders(‘sass‘, { indentedSyntax: true }),
    scss: generateLoaders(‘sass‘),
    stylus: generateLoaders(‘stylus‘),
    styl: generateLoaders(‘stylus‘)
  }

  然后偶然看到一个svg,发现webpack.base.conf.js下有这么一段和svg有关的,以为是图片打包出错了:

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: ‘url-loader‘,
        options: {
          limit: 10000,
          name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
        }

  又要怪自己毫无构建工具的基础了,查看了网上众多的不同版本,不同语法,就一一尝试了一下,然并卵。好在最后开窍了(暗暗吐槽一句什么垃圾百度),于是打开谷歌翻译将error翻译成中文,透过现象看本质(这里又要感叹一句英语到用时方恨少,有空得去补补英文),里面最关键的意思就是“解析SVG时出错:未加引号的属性值”,通过这句话终于找到原因,我引入的mui.css中对于SVG是用单引号包裹的,而webpack编译时SVG要求必须是双引号包裹!大家都知道前端对引号是没有强制要求的。

  ----------看似寻常最奇崛 成如容易却艰辛---------es6严格模式以及构建工具都开始对js作出规范化要求,未来要踩的坑还很多,加油!

原文地址:https://www.cnblogs.com/yxrs/p/8407357.html

时间: 2024-11-05 22:58:48

vue引入assets和static静态资源问题的相关文章

vue中assets和static的区别

Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点 不相同点: assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化.而压缩后的静态资源文件最终也都会放置在s

vue - src(assets和static)

描述:这里存放一些本地资源(images.css.js). assets:开发服务器(dev Server时引用的临时路径) static:静态资源存放(build Server). 原文地址:https://www.cnblogs.com/cisum/p/9612639.html

在网页中会引入哪些常见的静态资源?

1.JS(.js   .jsx  .coffee  .ts(TypeScript 类 c# 语言   c sharp  语言)) 2.CSS (.css   .less  .scss  .sass(基本不用了)) 3.Images(.jpg  .png  .gif  .bmp  .svg) 4.字体文件(Fonts)(.svg  .ttf  .eot  .woff  .woff2) 5.模板文件(.ejs  .jade  .vue[这是在webpack中定义组件的方式,推荐这么用]) 网页中引入

vue下assets下的静态资源和static下的静态资源的区别

区别一(最终位置) assets文件是src下的,所以最后运行是需要进行打包,而static文件不需要打包直接放在最终的文件中了 区别二(引用方式) assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,但是在script下必须用@import的方式引入 static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入 建议 只要在src下面的组件中用到的资源就放在assets下面 在项目中,经常会用带一些没有npm包的第三方插件,放在

Vue打包项目图片等静态资源的处理

项目打包,默认是打包在根目录下面的.当然我们可以通过设置,打包到任意子目录中去. 但是,当项目中引入资源的,比如:引入图片资源.js资源.或者字体图标之类的.那么可能在这个中间又会踩坑. 1.在vue文件引入图片 例如,我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文件中用下面的代码来使用这张图片. <img src="static/image/lyf.jpg" alt=""> 注意,最前面不要加 / ,如果是这

关于WEB-INF目录下的静态资源(js、css、img)的访问

首先,需要明确的是WEB-INF目录是被保护起来的,其下的jsp页面不能直接运行,只能通过控制器跳转来访问:而同样在此目录下的静态资源(js.css.img)也不能被WEB-INF目录外的其他文件直接引用. WEB-INF下的目录结构如图: jsp文件夹下放的是jsp文件,static文件夹下放的是css,js,img等静态资源: 由于jsp文件夹与static文件夹都在WEB-INF目录下,故jsp文件夹下的jsp引入某js可通过相对路径访问: <script src="../stati

springmvc中关于静态资源的放行

参考:http://blog.csdn.net/fujiakai/article/details/52504525 方法1. 修改web.xml文件,增加对静态资源的url映射,要加在org.springframework.web.servlet.DispatcherServlet的前面 如: 1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www

nodejs监听服务端口并且代理请求与静态资源

var express = require('express'); const proxy = require('http-proxy-middleware'); const app = express();           var options = {         target: 'http://192.9.104.247:7894',    //  你服务器端口         changeOrigin: true,     }; var exampleProxy = proxy(

vue2.0 资源文件assets和static的区别

资源文件处理 在我们的项目结构里,有两个资源文件的路径,分别是:src/assets 和 static/.那这两个到底有什么区别呢? Webpacked 资源 为了回答这个问题,我们首先需要理解webpack是怎样处理静态资源的.在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找资源的URL. 举个例子,在<img src="./logo.png"> 和 background: url(./logo.