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. PKU 1204 Word Puzzles(AC自动机)

    题目大意:原题链接 给定一个字符串矩阵和待查找的单词,可以朝8个不同的方向查找,输出待查找单词第一个字母在矩阵中出现的位置和该单词被查到的方向. A~H代表8个不同的方向,A代表正北方向,其他依次以4 ...

  2. UVALive - 4671 K-neighbor substrings (FFT+哈希)

    题意:海明距离的定义:两个相同长度的字符串中不同的字符数.现给出母串A和模式串B,求A中有多少与B海明距离<=k的不同子串 分析:将字符a视作1,b视作0.则A与B中都是a的位置乘积是1.现将B ...

  3. BitmapFactory.decodeStream(inputStream)返回null的解决方法

    场景:Android,通过inputStream从网络上获取图片 随后两次使用BitmapFactory对InputStream进行操作,一次获取宽高,另一次缩放 但是在缩放时,发现inputStre ...

  4. tensorboard实现训练的可视化

    tensorboard是tensorflow自带的可视化工具 输入命令可以启动tensorboard服务. tensorboard --logdir=your log dir 通过浏览器localho ...

  5. JavaWeb 如何在web.xml中配置多个servlet

    15:34:42 <servlet> <description></description> <display-name>ListMusicServle ...

  6. JavaEE学习记录（一）--软件系统体系结构

    1 常见软件系统体系结构B/S.C/S 1.1 C/S l C/S结构即客户端/服务器(Client/Server),例如QQ: l 需要编写服务器端程序,以及客户端程序,例如我们安装的就是QQ的客户 ...

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

    20145316 <Java程序设计>第1周学习总结 教材学习内容总结 一.了解java语言: 1.Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言. Java 技术具有卓越的 ...

  8. WebSocket使用SuperWebSocket结合WindowsService实现实时消息

    SuperWebSocket在WebService中的应用 最开始使用是寄托在IIS中,发布之后测试时半个小时就会断开,所以改为WindowsService 1. 新建Windows服务项目[Test ...

  9. MYSQL基本操作总结

    (1)cd c:/ //进入c:\-> (2)mysql -h 127.0.0.1 -u root -p //进入数据库 SHOW DATABASES; //显示所有数据库 CREATE DAT ...

  10. linux 登录数据库

    -h   地址 (例如:127.0.0.1,localhost) mysql -h 127.0.0.1 -u root -p