vue本地项目静态资源管理

统一放在src/static里面css,images,js

index.html里面使用重置样式

<link rel="stylesheet" href="static/css/reset.css">
 
 

组件里面使用图片 <div><img src="/static/img/img1.jpg"></div>

css使用背景图片
background: url(/static/img/img1.jpg) no-repeat;

npm run build之前需要将config/index.js

assetsPublicPath: '/'     修改成    assetsPublicPath: './'

打包之后网站根目录www里面直接放static目录和index.html

个人建议还是将自定义的css样式和js样式都在main.js中引入，这样纸打包之后生成的是一个文件（已经被整合了）

如果在index.html中引入的话，head里面有多个文件，这样就增加了http请求；

vue本地项目静态资源管理的更多相关文章

  1. vue本地项目设置通过手机访问

    最近再用vue写一个移动端的应用,想通过手机访问看看页面效果,于是有了下文. 1.shif+右键打开命令行工具,输入ipconfig,回车,得到电脑的ip 2.找到工作目录下的config文件夹中的i ...

  2. Vue中的静态资源管理（src下的assets和static文件夹的区别）

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

  3. vue 构建项目遇到的请求本地json问题

    在本地测试的json没有问题,但是打包后,发现json 的路径不对了,变成了绝对路径 解决方法: 建立的json文件需要放置  根目录/static下.如项目名/static/data.json,这边 ...

  4. Vue笔记--同局域网下访问本地项目

    正常开发中有时间提测比较麻烦.通常让测试小姐姐连接开发本地开启的服务器访问本地项目(在同一局域网下). 其实一般项目IDE已经实现这些功能例如webstorm和vscode,有时候需要单独配置下. 但 ...

  5. 如何将你的 Vue.js 项目部署在云开发静态托管之上

    云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML.CSS.JavaScript.字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托 ...

  6. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  7. ASP.NET没有魔法——ASP.NET MVC界面美化及使用Bundle完成静态资源管理

    对于一个应用来说界面的重要性无言而喻,而Web应用的界面是使用Html+Css以及Javascript实现的,ASP.NET MVC是一个用来构建Web应用的框架,它的界面也是Html实现的,对于一些 ...

  8. vue 构建项目vue-cli

    1.首先得有node和npm的环境,node的下载:http://nodejs.org/download/.安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2.接下来就是安装vue- ...

  9. vue 构建项目遇到的问题

    1.我在打包完成后,打开index.html文件发现地址并没有携带路由. config下的 index.js 中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思 ...

随机推荐

  1. hdu6194 string string string

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6194 题目: string string string Time Limit: 2000/10 ...

  2. docker基本用法和命令

    1.安装docker 检查有没有curl which curl 如果没有用以下命令可安装:sudo apt-get install curl 通过官方提供的脚本安装最新docker curl -sSL ...

  3. Python Date 1–Hello world print

    对比学习Python与C str1 = 'hello python 2'# 字符串i = 3.1415926535 print(str1)print("hello python\n" ...

  4. Spring事务用法示例与实现原理

    关于Java中的事务,简单来说,就是为了保证数据完整性而存在的一种工具,其主要有四大特性:原子性,一致性,隔离性和持久性.对于Spring事务,其最终还是在数据库层面实现的,而Spring只是以一种比 ...

  5. 20145314郑凯杰《信息安全系统设计基础》第八周复习总结 Part A

    20145314郑凯杰<信息安全系统设计基础>第八周复习总结 Part A 学习知识点内容总结 复习线索:http://group.cnblogs.com/topic/73069.html ...

  6. 20145327 《Java程序设计》第三周学习总结

    20145327 <Java程序设计>第三周学习总结 教材学习内容总结 对象:存在的具体实体,具有明确的状态和行为. 类:具有相同属性和行为的一组对象的集合,用于组合各个对象所共有操作和属 ...

  7. 20145331 《Java程序设计》第7周学习总结

    20145331 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 1.Lambda定义:一个不用被绑定到一个标识符上,并且可能被调用的函数. 2.在只有Lam ...

  8. python爬虫之新浪微博登录

    fiddler 之前了解了一些常见到的反爬措施,JS加密算是比较困难,而微博的登录中正是用JS加密来反爬,今天来了解一下. 分析过程 首先我们去抓包,从登录到微博首页加载出来的过程.我们重点关注一下登 ...

  9. ubuntu16.04 python3.5 opencv的安装与卸载（转载）

    转载https://blog.csdn.net/qq_37541097/article/details/79045595 Ubuntu16.04 自带python2.7和python3.5两个版本,默 ...

  10. HDU5299 圆的扫描线 && 树上删边博弈

    HDU5299 圆的扫描线 && 树上删边博弈 标签(空格分隔): 未分类 给出若干个圆,可以互相嵌套但不相交或相切. 每次删去一个圆和它内部的圆,进行博弈,问谁赢. 分成两部分.首先 ...