转自:vue-cli中自定义路径别名 assets和static文件夹的区别

静态资源处理:

assets和static文件夹的区别

相信有很多人知道vue-cli有两个放置静态资源的地方,分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。

assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。例如,在 <img src="./logo.png"> 
和 background: url(./logo.png)中,”./logo.png” 是相对的资源路径,将由Webpack解析为模块依赖。

static/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式引用:/static/[filename]。

在我们实际的开发中,总的来说:static放不会变动的文件 assets放可能会变动的文件。

在js数据中如何引用图片

因为webpack会将图片当做模块来引用,所以在js中需要使用require将图片引用进来,不能直接以字符串的形式。

1
2
3
4
5
6
7
8
9
10
11
12
js部分:
    data () {
        return {
             imgUrl: '图片地址',//错误写法
            imgUrl: require('图片地址')//正确的写法
        }
}
template部分:
img标签形式:
<img :src="img" />
或者p背景图形式:
<p :style="{backgroundImage: 'url(' + img + ')'}"></p>

说了图片就正好再提一下vue-cli的一个图片有关的配置,下图这个配置的意思是:在10000b 的图片以下进行base64转换,所以如果项目中有些比较小的icon就不用再进行图片精灵的处理了

webpack+vue自定义路径别名

vue-cli 用的是webpack,也可以使用webpack自定义别名这个功能,自定义别名这个功能当你在多层文件夹嵌套的时候不必一层一层找路径,直接使用自定义别名就可以找到文件的位置。

设置方法:

**设置地址:**build文件夹下面的webpack.base.conf.js文件 
具体设置:

1
2
3
4
5
6
7
8
resolve: {
    extensions: ['.js''.vue''.json'],
     alias: {
        'vue$''vue/dist/vue.esm.js',
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//增加这一行代码
        }
    },

使用方式:

使用的时候要像下方截图的B处一样前面要加上一个’~’,这里的webstorm虽然提示报错,我们可以不用管,代码运行是正常的。

解读:

这里给’static’赋予了一个地址,那么在程序中引入路径的时候’~static’就直接可以代替路径’../static’,亲测,这里就算多层嵌套也可以成功找到路径。

清理项目中没用的插件

很多人像我一样,刚开始的会安装很多插件,然后最后在项目中并没有用到。那之前安装的插件太多了,连自己都忘记了安装了哪些插件?

package.json

在上图所示位置,我们项目安装的所有的模块依赖都在这个pageage.json文件中,当我们需要整理一波自己的依赖的时候,可以在这个文件里面找有没有现在已经没用的依赖,可以使用命令行npm remove 模块名字来删除没用的模块。

–save-dev和–save的区别

上面的这些依赖有些只在开发环境里面使用的模块,有的在项目上线之后还是要继续依赖的模块。他们之间的区别就在于我们平时安装模块依赖时的:--save-dev和 --save

当你使用--save-dev安装依赖的时候就会放在package.json的devDependencies对象下面,相反的,当你使用--save安装依赖的时候就会出现在dependencies对象下面。

总结:* –save-dev 是你开发时候依赖的东西,–save 是你发布之后还依赖的东西。*

vue-cli中自定义路径别名 assets和static文件夹的区别的更多相关文章

  1. Vue中的静态资源管理(src下的assets和static文件夹的区别)

    ### 你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢? 资源打包 为了回答这个问题,我们需要了解webpack是如何处理静态资源的. 在所有 ...

  2. assets文件夹与static文件夹的区别

    assets文件夹与static文件夹的区别原地址==>https://www.cnblogs.com/x123811/p/9230700.html 相同点===>assets文件夹和st ...

  3. vue项目中的路径别名

    每次写引入组件的路径,如果路径嵌套比较深,那么会比较麻烦,我们可以在webpack.base.conf.js,中设置路径的别名,默认webpack设置src的别名为@ 建议配置src下一级目录的别名, ...

  4. vue中assets文件夹与static文件夹的区别

    1.如果这些产品图片文件“万年不变”,放在 /static 目录里,(不需要使用require将这些图片作为模块来引用) var products = [{ img: '/static/img/pro ...

  5. Path,Files巩固,题目:从键盘接收两个文件夹路径,把其中一个文件夹中(包含内容)拷贝到另一个文件夹中

    这个题目用传统的File,InputStream可以做,但是如果用Files,Path类做,虽然思路上会困难一些,但是代码简洁了很多,以下是代码: import java.io.IOException ...

  6. 【vue-cli 3.0】 vue.config.js配置 - 路径别名

    如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...

  7. vue 项目中assets文件夹与static文件夹引用的区别

    首先,assets文件夹和static文件夹在vue-cli生成的项目中,都是用来存放静态资源的. 1.assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式.build的时 ...

  8. vue打包静态资源后显示空白及static文件路径报错

    1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过scr ...

  9. Django中程序中图片资源的路径问题(static文件夹的放置)

    步骤1:在settings.py文件的最后加上以下内容: STATIC_URL = '/static/'STATIC_ROOT = os.path.join(os.path.dirname(__fil ...

随机推荐

  1. webpack+vue解决前端跨域问题

    webpack 跨域,在这里整理了一下逻辑首先不是为了axios库来进行跨域的,而是直接通过node的webpack设置代理来完成跨域的. 先贴一条自己请求的连接 1.设置自定义域: 在config目 ...

  2. 2016424王启元 Exp5 msf基础应用

    成功实现的有: 一个主动攻击实践,ms08_067 一个针对浏览器的攻击,ms11_050 一个针对客户端的攻击,Adobe(在实现这一步骤的时候有点小瑕疵,就是Adobe的版本问题换了三四个才成功) ...

  3. 宜人贷项目里-----正则匹配input输入月份规则

    在标签上可以直接进行校验如下,如果只调数字键盘type=number不好用可以用type=tel <input name="creditDate" oninput=" ...

  4. 如何制作高水平简历?&& 制作简历时需要注意的问题

    1. 投递简历时一定要署名.  无论是简历的名称还是投递到邮箱时的名称,都需要说明重要信息,即 姓名-职位-学校-专业 . 这样,hr在筛选.录入简历时可以很方便查找简历,这样也可以给hr.面试官一个 ...

  5. MySQL prompt提示符总结

      A counter that increments for each statement you issue \D 当前日期 \d 当前数据库 \h 数据库主机 \l The current de ...

  6. C#控件随窗体大小改变而改变

    几种方法:1.点击控件,属性,里面有一个Dock,选择Fill,就会变得和它的父容器一样大.而且会随之变化.2.点击控件,属性,里面有一个Anchor,选择Top,Right,Bottom,Left. ...

  7. Go语言备忘录(2):反射的原理与使用详解

    本文内容是本人对Go语言的反射原理与使用的备忘录,记录了关键的相关知识点,以供翻查. 文中如有错误的地方请大家指出,以免误导!转摘本文也请注明出处:Go语言备忘录(2):反射的原理与使用详解,多谢! ...

  8. [转]nopCommerce 3.9 版本发行

    本文转自:http://www.cnblogs.com/xoray007/p/nopCommerce-39-release.html NopCommerce中文信息地址:http://www.nopc ...

  9. golang学习之rpc实例

    rpc(远程过程调用),可以像调用本地程序一样调用远端服务,rpc分为http方式和tcp连接方式,使用http的rpc调用如下: 首先是server端: // rpc_server project ...

  10. mongodb基本指令

    MongoDB基本命令用成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作. 输入help可以看到基本操作命令: show dbs:显示数据库列表 show co ...