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. Oblect类之hashCode和equals

    1.hashCode的默认实现.显然是一个本地方法. 2.equals的默认实现.默认equals在比较两个对象时,是看他们是否指向同一个地址的.“==”操作比较的是两个变量的值是否相等,对于引用型变 ...

  2. 如何注册iClap账号？

    iClap是一个以产品为基础,集成员工日常所需工具,打通项目工作流程,实现员工自我工作管理.项目管理和企业管理三个体系协同的管理规范系统. 工具/原料 iPhone/Android/浏览器 Teamb ...

  3. appium不同姿势安装

    一 桌面版(打开很慢,常用于辅助元素定位) 1.官网下载window版本: 2.直接点击图标即可打开  

  4. LeetCode 7. Reverse Integer 一个整数倒叙输出

    潜在问题:(1)随着求和可能精度会溢出int 范围,需要使用long 来辅助判断是否溢出,此时返回 0 Assume we are dealing with an environment which ...

  5. C++命名规则(转)

    如果想要有效的管理一个稍微复杂一点的体系,针对其中事物的一套统一.带层次结构.清晰明了的命名准则就是必不可少而且非常好用的工具. 活跃在生物学.化学.军队.监狱.黑社会.恐怖组织等各个领域内的大量有识 ...

  6. nginx添加新模块

    1.下载模块 git clone https://github.com/agentzh/echo-nginx-module 2.放入指定位置 mv echo-nginx-module-master / ...

  7. iOS 动态调用方法

      - (void)bugly { dispatch_async(dispatch_get_global_queue(0, 0), ^{ if (NSClassFromString(@"Bu ...

  8. 在VS2012中采用C++中调用DLL中的函数（4）

    转自:http://www.cnblogs.com/woshitianma/p/3683495.html 这两天因为需要用到VS2012来生成一个DLL代码,但是之前并没有用过DLL相关的内容,从昨天 ...

  9. OpenStack之Glance模块

    一.Glance服务 1.Glance架构 Glance架构是一个典型的CS架构,提供的也是标准的Rest接口,各个layer分层也是很清楚的. 2.Glance服务 Glance是OpenStack ...

  10. 设置oracle编辑的快捷方式

    打开PLSQL Developer: 中文版:[工具]-->[首选项]-->[用户界面]-->[编辑器],在右侧界面往下拉找到[自动替换],点击[编辑],就可以自定义想要的快捷方式了 ...