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. 成员函数查找[条款24]---《C++必知必会》

    调用一个成员函数,涉及三个步骤:第一步,编译器查找函数的名字:第二部,从可用候选者中选择最佳匹配函数:第三步,检查是否具有访问该函数的权限. #include<iostream> usin ...

  2. Jquery each循环用法小结

    var str = res.ZhaoPian; var piclist = str.substring(0, str.length - 1).split(','); $.each(piclist, f ...

  3. Python-argparse-命令行与参数解析

    import argparse import numpy as np import cv2 import os import numpy.random as npr from dface.core.u ...

  4. mysql5.7 linux安装参考

    安装参考: https://www.cnblogs.com/ianduin/p/7679239.html http://blog.csdn.net/wb96a1007/article/details/ ...

  5. WWDC 2017 苹果开发者大会

    1.更新了系统固件 iOS 11 macOS High Sierra watchOS 4 tvOS 11 2.更新了硬件以及新设备 升级了 iMac  以及 iMac Pro 升级了 MacBook ...

  6. 对Spring Ioc 以及DI的精彩理解

    转:http://blog.csdn.net/cyjs1988/article/details/50352916 学习过spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注 ...

  7. CF1157D N Problems During K Days(简单构造)

    题目 题目 原数据是水成啥样了,\(<\longrightarrow <=,>=\longrightarrow <=,\)这也能过 被\(hack\)后身败名裂 做法 简单的贪 ...

  8. jQuery height() 需要注意的地方

    var aNode = $('#id'); var height = aNode.height(); //如果在获取height前,aNode已经是display:none 或者说 aNode是隐藏的 ...

  9. 照着官网来安装openstack pike之glance安装

    镜像服务image service(glance)的安装还是在控制节点上进行: 1.前提条件,数据库为glance创建库和账户密码来连接数据库 # mysql -u root -p MariaDB [ ...

  10. 学号20145303 《Java程序设计》第一周学习总结

    学号20145303 <Java程序设计>第一周学习总结 教材学习内容总结 *dos命令行: dir:列出当前目录下的文件及文件名 md:创建目录 rd:删除目录.为空时文件夹(文件夹为空 ...