精华内容
下载资源
问答
  • (一)assets文件夹与static文件夹的区别 ...区别二:assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,在script下必须用@import的方式引入, 而static下的文件在.v...

    (一)assets文件夹与static文件夹的区别

    区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了

    区别二:assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,在script下必须用@import的方式引入,

                  而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入

    总结一下

    1.assets用来放置样式、静态图片,只要src下面的组件中用到的资源就放在assets中。

    2.static用来放没有npm包的第三方插件,字体文件。

    3.assets与components同级  components下的.vue引用静态文件时,相对路径为 ../assets/wapFront

     

     

    4.assets与app.vue同级  相对路径为 ./assets/wapFront

     

     

     

    (二)vue如何引入其它静态文件:

    1.src目录下的资源只能import或require。

    2.想静态引入的话,建立一个与src同级的目录例如static,然后把静态资源放入该文件夹下,html的引入路径如下:./static/...

    注:试过一定要放在static文件夹下,否则报错

     

    (三)vue如何引入sass

    npm i sass --save-dev 装下它

    npm i sass-loader --save-dev 再装下它

    在webpack.base.config配置文件里加上这段
    {
      test: /\.scss$/,
      loader: 'style!css!sass'
    },
    在组件文件.vue里直接引入scss样式
    <style lang="scss">
      .hello input {
      color: red;
    }
    </style>

    (四)vue报错cannot GET
    1.你init vue-cli的时候,有个选项问你是否需要eslint可以选择不需要,因为它是检验的,可以不用,如果用它格式写的不规范启不来页面

    2.如果已经安装eslint,将下图所示部分注释掉,eslint对空格要求比较严格

    转载于:https://www.cnblogs.com/qcl-524077/articles/9233607.html

    展开全文
  • 所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src //代码 //渲染后html页面 d、如果路径以 ~ 开头,其后的部分将会被看作模块依赖,既可以加载含有别名的静态资源,又可以加载node-modules中的资源。如 //代码 //...

    前言: node中的全局变量require

    开始前,咱们先聊聊node中require的用法。

    您可能觉得这有什么,不就是直接require(url)直接引用吗,如果您这么想,那可就太小看require了。

    let url = "@/assets/images/carousel/logo.svg"

    require(url) //报错

    let url = "logo.svg"

    require("@/assets/images/carousel/"+url); //正确

    很诡异是不是? 我相信你第一次见到后会不自觉的说句f**k。

    这是因为你修改页面后,webpack进行编译,等待编译完,需要进行工程的打包,然后打包正确,才能热加载运行并刷新页面。

    如果require中传入的是个变量,它有可能是计算机系统中的任何目录下的任何文件,那么在打包静态资源时它有可能会将你的电脑整个磁盘遍历一遍(它很傻)。所以至少需要给出在哪个路径下,这样才能精确的将那个路径下的对应文件打包,然后在代码运行时,直接用对应文件名生成正则匹配(因为打包后的文件,可能有hash值。不能直接查文件名),找到后,加载到代码中。

    所以,请记住 尽可能详细的指定require中的路径,然后拼接变量

    接下来说下打包后的路径问题

    webpack将项目中的静态资源编译打包后,生成的路径已经不是原来的那个路径了。如

    src/assets/image/logo.jpg

    编译后可能变成

    dist/public/image/logo.1d997ea3.jpg

    而通过require(“src/assets/image/logo.jpg”),会自动找到并加载dist/public/image/logo.1d997ea3.jpg文件

    一、部分的路径处理

    Vue Loader 在编译单文件组件中的 块时,它也会将所有遇到的资源 URL 转换为 webpack 模块请求。(这样我们就没必要手动调用require了,而是交给vue-loader处理了)

    vue-loader默认可以处理的标签/特性的组合如下:

    {

    video: ['src', 'poster'],

    img: 'src', //即img元素上的src属性

    source: 'src', //source元素上的src属性

    image: 'xlink:href'

    }

    面对上面的标签组合,vue-loader会自动进行资源url的转换。

    转换规则:

    a、如果路径是绝对路径,会被原样保留。如/src/assets/image/login/title.png

    //代码

    //渲染后html页面

    //当然这个图片是无法展示的,因为编译后title.png已不在src/assets/image/login下了

    b、如果路径以 . 开头,将会被看作相对的模块依赖。如 ./titlea.png

    //代码

    //渲染后html页面

    c、如果路径以 @ 开头,也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias,这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src

    //代码

    //渲染后html页面

    d、如果路径以 ~ 开头,其后的部分将会被看作模块依赖,既可以加载含有别名的静态资源,又可以加载node-modules中的资源。如

    //代码

    //渲染后html页面

    //代码

    //渲染后的html页面

    二、

    由于vue-loader在处理style时,采用的是style-loader,所以可能 和上面部分的转换规则不太一样。

    在vue-loader的内部使用了如下的配置(不一定配置,也有可能通过js直接给rules赋值):

    //在vue-loader的内部使用css-loader

    module.exports = {

    module: {

    rules: [

    {

    test: /\.css$/,

    loader: 'css-loader',

    options: {

    url: true, //默认选项

    },

    },

    ],

    },

    };

    url为true时,则意味着可以将url中的字符串通过require()加载进来。

    转换规则

    //代码

    .login-wrap {

    background-image: url("/src/assets/image/login/title.png");

    }

    //渲染后css

    .login-wrap[data-v-70c98a68] {

    background-image: url(/src/assets/image/login/title.png);

    }

    同样不会显示,编译后的路径不是这个

    b、如果路径以 . 开头,将会被看作相对的模块依赖。如 ./titlea.png

    //代码

    .login-wrap {

    background-image: url("./titlea.png");

    }

    //渲染后css

    .login-wrap[data-v-70c98a68] {

    background-image: url(/static/img/titlea.1e9fa570.png);

    }

    c、如果路径以 ~ 开头,其后的部分将会被看作模块依赖,即可以加载含有别名的静态资源,又可以加载node-modules中的资源。如

    //代码

    .login-wrap {

    background-image: url("~[npm包名]/logo.png");

    }

    //渲染后css

    .login-wrap[data-v-70c98a68] {

    background-image: url(/static/img/logo.e05643fc.png);

    }

    //代码

    .login-wrap {

    background-image: url("~@/assets/image/login/bg.png");

    }

    //渲染后css

    .login-wrap[data-v-70c98a68] {

    background-image: url(/static/img/bg.1d997ea3.png);

    }

    注意: 和上面的相比,唯独少了直接用@开头的方式url(“@/assett/logo.png”),所以下面写法是错误的

    //代码

    .login-wrap {

    background-image: url("@/assets/image/login/bg.png");

    }

    感谢各位看客的阅读,由于在项目中遇到了这样的困然,再加上同事也经常问我什么原因,故而填坑,以免其他人踩坑。

    展开全文
  • vue引入图片静态资源

    2020-07-13 11:45:04
    导入:import yzgnImg1 from '@/assets/imges/home/yzgn-img1.png' 定义:在 data 中定义:yzgnImg1 使用:<img :src="yzgnImg1" />
    1. 导入:import yzgnImg1 from '@/assets/imges/home/yzgn-img1.png'
    2. 定义:在 data 中定义:yzgnImg1
    3. 使用:<img :src="yzgnImg1" />
    展开全文
  • 最近修改一些老项目,好多组件...Vue静态资源引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 JavaScript 被导入或在 template/CSS 中被引用。 这类引用会被 webpack 处理。诸

    最近修改一些老项目,好多组件里面引入图片的方式不太一样,总感觉自己没有好好总结过,今天有时间参考了几篇帖子,就总结一下;

    在总结之前看了一下vue-cli的文档,突然感觉之前可能是我忽略它了基本没有看过,官方文档这块写的清清楚楚,还是应该多看文档,天天看掘金、简书这些碎片化知识也不太好;

    Vue中静态资源引入机制


    Vue.js关于静态资源的官方文档

    静态资源可以通过两种方式进行处理:

    1. 在 JavaScript 被导入或在 template/CSS 中被引用。
      这类引用会被 webpack 处理。诸如<img src="...">background: url(...)CSS @import的资源, 都会被解析为一个模块依赖。
      例如,url(./image.png)会被翻译为require(’./image.png’)

    2. 放置在public目录下或通过绝对路径被引用。
      这类资源将会直接被拷贝,而不会经过 webpack 的处理,你需要通过绝对路径来引用它们。

    webpack中的require解析

    首先明确一点,在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴,而进入index.js后,加载的组件中的require都属于webpack的解析范畴。

    先聊聊webpack中require的用法。

    // 代码1 报错
    let url = "@/assets/images/carousel/logo.svg"
    require(url)    // require单纯传了一个变量
    
    // 代码2 正确
    let url = "logo.svg"
    require("@/assets/images/carousel/"+url); // require里面虽然是变量但是增加了前缀,让计算机更快找到
    

    页面修改webpack流程:

    webpack进行编译
    等待编译完
    进行工程打包
    打包正确
    热加载运行
    刷新页面

    如果require中传入的是个变量,它有可能是计算机系统中的任何目录下的任何文件,那么在打包静态资源时它有可能会将你的电脑整个磁盘遍历一遍(它很傻); 如上代码1只传了个变量。
    因此需要给出在大致路径(如上代码2),这样才能精确的将那个路径下的对应文件打包,然后在代码运行时,直接用对应文件名生成正则匹配(因为打包后的文件,可能有hash值。不能直接查文件名),找到后,加载到代码中。所以,尽可能详细的指定require中的路径,然后拼接变量。

    webpack将项目中的静态资源编译打包后,生成的路径已经不是原来的那个路径了。

    src/assets/image/logo.png
    // 编译后可能变成 
    dist/public/image/logo.1d997ea3.png
    
    通过require("src/assets/image/logo.png"),
    会自动找到并加载 dist/public/image/logo.1d997ea3.png文件
    

    关于打包完不是原来的路径那是 file-loader 的作用,这里不细说可以看一下,file-loader和url-loader的讲解。

    解析介绍

    这里主要用到 vue-loader,vue-loader 在编译单文件组件中的 块时,它也会将所有遇到的资源 URL 转换为 webpack 模块请求。(这样我们就没必要手动调用require了,而是交给vue-loader处理了)
    vue-loader默认可以处理的标签/特性的组合如下: (不包括style)

    // 面对下面的标签组合,vue-loader会自动进行资源url的转换。
    {
      video: ['src', 'poster'],
      img: 'src',   //即img元素上的src属性
      source: 'src',  //source元素上的src属性
      image: 'xlink:href'
    }
    

    转换规则(官方文档有介绍)

    部分的路径处理

    1. 如果路径是绝对路径,会被原样保留。如 /src/assets/image/login/title.png
    //代码
    <template>
       <img src="/src/assets/image/login/title.png" alt="">
    </template>
    
    //渲染后html页面
    <img data-v-70c98a68="" src="/src/assets/image/login/title.png" alt="">
    // 当然这个图片是无法展示的,因为编译后title.png已不在src/assets/image/login下了 
    

    这个图片是无法展示的,因为编译后title.png已不在src/assets/image/login下了 ,关于public文件夹在下文会有介绍

    1. 如果路径以 . 开头,将会被看作相对的模块依赖。如 ./title.png
    //代码
    <img src="./titlea.png" alt="">
    
    //渲染后html页面
    <img data-v-70c98a68="" src="/static/img/titlea.1e9fa570.png" alt="">
    

    ❌错误的引入方式,使用 :src 调用了 v-bind 指令处理其内容,相对路径不会被webpack的 file-loader 处理。

    <img :src="'./assets/images/02.jpg'" alt=""> // ×
    // 编译后:
    <img src="./assets/images/02.jpg" alt="">
    
    1. 如果路径以 @ 开头,也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias,这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src
    //代码
    <img src="@/assets/image/login/title.png" alt="">
    
    //渲染后html页面
    <img data-v-70c98a68="" src="/static/img/title.1e9fa570.png" alt="">
    
    1. 如果路径以 ~ 开头,其后的部分将会被看作模块依赖,既可以加载含有别名的静态资源,又可以加载node-modules中的资源。如
    // 如果用别名的静态资源必须加@否则报一下错误。
    //代码 必须有@否则报错,@是别名
    <img src="~@/assets/image/login/title.png" alt="">
    //渲染后html页面
    <img data-v-70c98a68="" src="/static/img/title.1e9fa570.png" alt="">
    
    
    //代码
    <img src="~[npm包名]/xxx/logo.png" alt="">
    //渲染后的html页面
    <img data-v-70c98a68="" src="/static/img/logo.2f53e458.png" alt="">
    

    <style>部分的路径处理

    由于vue-loader在处理style时,采用的是style-loader,所以可能 和上面部分的转换规则不太一样。在vue-loader的内部使用了如下的配置(不一定配置,也有可能通过js直接给rules赋值):

    //在vue-loader的内部使用css-loader
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: 'css-loader',
            options: {  
              url: true, //默认选项 url为true时,则意味着可以将url中的字符串通过require()加载进来。
            },
          },
        ],
      },
    };
    
    1. 如果路径是绝对路径,会被原样保留。如 /src/assets/image/login/title.png
    //代码
    <style scoped>
    .login {
      background-image: url("/src/assets/image/login/title.png");
    }
    </style>
    
    //渲染后css
    .login[data-v-70c98a68] {
      background-image: url(/src/assets/image/login/title.png);
    }
    // 同样不会显示,编译后的路径不是这个(要放在public下面)
    
    1. 如果路径以 . 开头,将会被看作相对的模块依赖。如 ./title.png
    //代码
    <style scoped>
    .login {
      background-image: url("./title.png");
    }
    </style>
    
    //渲染后css
    .login[data-v-70c98a68] {
      background-image: url(/static/img/title.1e9fa570.png);
    }
    
    1. 如果路径以 ~ 开头,其后的部分将会被看作模块依赖,即可以加载含有别名的静态资源,又可以加载node-modules中的资源。如
    //代码
    <style scoped>
    .login {
      background-image: url("~[npm包名]/logo.png");
    }
    </style>
    
    //渲染后css
    .login-[data-v-70c98a68] {
      background-image: url(/static/img/logo.e05643fc.png);
    }
    
    //代码
    <style scoped>
    .login {
      background-image: url("~@/assets/image/login/bg.png");
      // 和上面的<template>相比,少了直接用@开头的方式url("@/assett/logo.png")
      // 错误写法
      // background-image: url("@/assets/image/login/bg.png");
    }
    </style>
    
    //渲染后css
    .login[data-v-70c98a68] {
      background-image: url(/static/img/bg.1d997ea3.png);
    }
    

    其他介绍

    拼接路径

    1. 当路径的文件名需要拼接变量的时候,可使用 require() 引入,在 template:src 或者 scriptdata computed 中都可以进行 require 引入或拼接。
    <img :src="require('./assets/images/03.jpg')" alt=""> // √
    <img :src="require('./assets/images/'+ this.imgName +'.jpg')" alt=""> // √
    <img :src="img3" alt=""> // √
    <script>
    export default:{
        data(){
            return {
              imgName: '03.jpg',
              img3: require('./assets/images/03.jpg'),
              // 或者 @是定义的别名,(注意这里可以直接用@,而在style中只能用~@)
              img3: require('@/assets/images/login-bg.png')
            }
          },
    }
    </script>
    // 编译后:
    <img src="/img/03.ea62525c.jpg" alt="">
    
    <template>
       <img :src="imgUrl">
    </template>
    
    <script>
      import imgUrl from "../assets/test.png"   
    </script>
    
    <div :style="{ backgroundImage: `url(${img3})` }"></div>
    <script>
    export default:{
        data(){
            return {
              img3: require('./assets/images/03.jpg'),
              // 或者
              img3: require('@/assets/images/login-bg.png')
            }
          },
    }
    </script>
    

    public文件夹

    1. 任何放置在public文件夹的静态资源都会被简单的复制,而不经过 webpack。你需要通过绝对路径来引用它们。

    2. 用绝对路径引入时,路径读取的是public文件夹中的资源,任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中,而不经过 webpack特殊处理。

    3. 当你的应用被部署在一个域名的根路径上时,比如 http://www.abc.com/,此时这种引入方式可以正常显示但是如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀 publicPath 是部署应用包时的基本 URL,在vue.config.js 中进行配置,详情参阅官方文档

    // vue.config.js 应用没有部署到域名的根目录
    // 引入publicPath并且将其拼接在路径中,实现引入路径的动态变动
    module.exports = {
        publicPath:'/foo/',
        ...
    }
    
    <img :src="this.publicPath + 'images/05.jpg'" alt=""> // √
    // 编译后:
    <img src="/foo/images/05.jpg" alt="">
    <script>
    export default:{
        data(){
            return {
              publicPath: process.env.BASE_URL,
            }
        },
    }
    </script>
    

    总结

    URL 转换规则

    • 如果 URL 是一个绝对路径 (例如/images/foo.png),它将会被保留不变。
    • 如果 URL 以 . 开头,它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
    • 如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源:<img src="~some-npm-package/foo.png">
    • 如果 URL 以 @ 开头,它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向/src的别名@。(仅作用于模版中)

    推荐将资源作为你的模块依赖图的一部分

    推荐将资源作为你的模块依赖图的一部分导入,这样它们会通过 webpack 的处理并获得如下好处:

    • 脚本和样式表会被压缩且打包在一起,从而避免额外的网络请求。
    • 文件丢失会直接在编译时报错,而不是到了用户端才产生 404 错误。
    • 最终生成的文件名包含了内容哈希,因此你不必担心浏览器会缓存它们的老版本。
    • 综上静态资源不建议全部放在public文件夹

    参考文件

    展开全文
  • 文章目录一、关于Vue-Cli图片引入问题?二、两种引入方式三、相对路径动态时如何使用?四、背景图片background-image如何渲染? 一、关于Vue-Cli图片引入问题? 首先我们要清楚Vue-cli是基于Webpack来进行的打包,...
  • 1、assets文件夹与static文件夹的区别assets文件是src下的,所以最后运行时需要...引入静态资源方法:js中用import,css中用@import url(...) ,index.html中用link(script)标签引入。利用vue-cli脚手架搭建的webp...
  • vue cli 打包静态资源引入静态js

    千次阅读 2019-11-06 10:29:52
    最近在vue项目中遇到index.html文件中引入js报错还是第一行报错:Uncaught SyntaxError: Unexpected token < 当前引入路径: 当前引入路径: 有可能是引入路径不对,验证了一下,可以跳转,说明路径...
  • 在使用vue-cli3创建项目的时候会发现没有了config文件夹,唯一能够进行配置的地方就只剩下vue.config.js文件了,而且还没有配置静态资源的地方 如果项目需要引入外部json html文件,则需要自己新建一个static文件夹...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 387
精华内容 154
关键字:

vue引入静态资源

vue 订阅