转自: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. Nearest Common Ancestors(LCA板子)

    题目链接:http://poj.org/problem?id=1330 Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 1000 ...

  2. PHP面向对象的基本思路

    第一步:识别对象 ——任何实体都可以被识别为一个对象 第二步:识别对象的属性 ——对象里面存储的数据被识别为属性 ——对于不同的业务逻辑,关注的数据不同,独享里面存储的属性也不同 第三步:识别对象的行 ...

  3. Python+Selenium(webdriver常用API)

    总结了Python+selenium常用的一些方法函数,以后有新增再随时更新: 加载浏览器驱动: webdriver.Firefox() 打开页面:get() 关闭浏览器:quit() 最大化窗口:  ...

  4. 万物智联,腾讯云 IoT 边缘计算揭秘——云+未来峰会开发者专场回顾

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:现在是万物互联的时代,智能穿戴设备,智能家居,无人商业,改变了我们的生活方式.预计到2021年,全球物联网设数将达到150亿,超过手机 ...

  5. bzoj 2167: 公交车站

    Description Z市交通不发达,所有公交路线覆盖的边竟然一个环也不包含,甚至该市的公交路线有可能会分为几个互不连通的块,这可真是不可思议.有一天,你突然听到一条消息,说你的M个同学被困在了Z市 ...

  6. 记一次bug修复过程

    我的建议,究竟有谁会看,以我的位置,到底能推动到哪一层可行性,可能性 问题:用户的数据丢失了.以为是修改操作 有bug,但查看了后端接口和前端校验,都没有发现问题.但是input数据没有日志[日志级别 ...

  7. JqueryEasyUI EasyLoader

    EasyLoader(简单加载) 对象的属性和方法: 使用: <script src="~/jquery-easyui-1.5.2/jquery.min.js">< ...

  8. 7、srpingboot改变JDK版本

    在pom.xml中加上 <plugin> <artifactId>maven-compiler-plugin</artifactId> <configurat ...

  9. 把一个项目a生成后放在另一个项目b使用(b项目是例子中的ScreenWebPage_Tool)

    a项目属性---生成事件---后期生成事件命令行   xcopy /r /y  $(TargetDir)*.* $(SolutionDir)ScreenWebPage_Tool\bin\Debug\* ...

  10. laravel后台注册登入

    1.只需要在新安装的 Laravel 应用下运行 php artisan make:auth 和 php artisan migrate,这两个命令会生成用户登录注册所需要的所有东西 2.你会发现 h ...