vue-cli构建项目在index.html中使用静态文件

在vue-cli构建的项目中,且使用在移动端,我们希望每一个页面加载时都可以使用flexible.js来适配手机. 那么这个flexible.js被import到每一个组件中就不合适了. 好的方法是直接放在index.html的head中. 方法如下: 第一步: 在src同一个目录下建立static文件夹(vue-cli自身就有),然后在static中建立一个js文件夹存放静态js文件,即把flexible.js放进去. 第二步: 直接在html中引用该文件,如下所示: <!DOCTYPE ht…

『vue踩坑日常』在index.html中引入静态文件不生效

Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题本文针对的是Vue小白,不喜勿喷,谢谢出现该问题的标志如下控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html) 出现的原因及解决办法第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫…

VUE学习笔记之vue cli 构建项目

一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,另需要注意的是npm的版本最好是3.x.x以上,以免对后续产生影响. 2.安装淘宝镜像 npm install -g cnpm --registry= https://re…

vue cli 打包项目造成css背景图路径错误

vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就会使路径错误: 解决办法: 办法一: 把不需要编译的东西,直接放在static文件下,css引用的时候直接写相对路径: 具体原因看:https://segmentfault.com/q/1010000009842688(大致是static文件夹下的东西不会经过编译) 办法二:进行wepack配置:…

@vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件运行使用配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 online github Vue cli 3.0 使用 svg-symbol(svg 雪碧图),整个 https://www.iconfont.cn 的图标库为你所用,加快开发速度. Vue 脚手架升级 3.0,项目也随…

webpack项目在开发环境中使用静态css文件

webpack项目在开发环境中使用静态css文件在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法: 在js文件中import(假设已配好相关的loader) 如在main.js中import 'izitoast/dist/css/izitoast.min.css' 在自己写的 scss 等文件中 @import 如@import '../../assets/scss/widgets.scss'…

擦他丫的，今天在Django项目中引用静态文件jQuery.js 就是引入报错，终于找到原因了！

擦 ,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了! 问题在于我使用的谷歌浏览器,默认使用了缓存,导致每次访问同一个url时,都返回的是缓存里面的东西.通过谷歌浏览器里面的开发者工具network下面的选项能禁用缓存. 禁用缓存后,则在django开发环境里面,运行python manage.py runserver,如DEBUG的值设为True时,可以正常加载显示静态文件:如设为False时,是不能成功加载显示静态文件的.…

（5）ASP.NET Core 中的静态文件

1.前言当我们创建Core项目的时候,Web根目录下会有个wwwroot文件目录,wwwroot文件目录里面默认有HTML.CSS.IMG.JavaScript等文件,而这些文件都是Core提供给客户端使用的静态文件.但是这些静态文件需要在Core里面配置才可以对外公开访问. 2.设置静态文件目录静态文件都存储在Core Web根目录中.默认目录是<content_root>/wwwroot,但可通过 UseWebRoot方法更改访问目录.而content_root是指web项目的所有文件…

【jsp】怎么在jsp文件中引入静态文件(.js .css)

如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下,可以先获得项目的根路径,然后再加上文件路径. ${pageContext.request.contextPath} 可以获得当前项目的路径,然后就只需要在后面加上引入的静态文件的文件路径即可.比如: 这样就可以引入js文件下的jquery.min.js文件了. 当然除了用于引入今天文件还可以加…

Django中对静态文件的支持（转）

英文原文:[http://agiliq.com/blog/2013/03/serving-static-files-in-django/] 译文:[http://segmentfault.com/a/1190000000358284] 处理静态文件,尤其是在开发时,是一件蛋疼的事情.在这篇文章中,我们将会讨论一些设置,目录结构和他们之间的相互影响.设置好DEBUG = True然后我们开始开发吧. 我们将会创建一个Django项目,这样可以让我们更好的了解我们讨论的这些这些文件在什么目录中.我们…

day52_9_16Django中的静态文件和orm

一.静态文件配置在配置静态文件时,需要创建一个文件夹在Django项目文件夹下,名字与使用无关. 静态文件包括html等使用的不会变动的插件文件等.分为三个部分: css文件夹当前网站所有的样式文件 js文件当前网站所有的js文件 img文件当前网站所有的图片文件其他(前端框架代码). 1.在静态文件的调用时,不能直接在html文件夹中使用相对路径或绝对路径进行调用,因为在页面访问的时后不会获取到该插件资源,所以需要将所有静态文件暴露给访客,使得访客可以获得. 在Django中可以使…

Asp.Net Core 中的静态文件

Asp.Net Core 中的静态文件在这节中我们将讨论如何使 ASP.NET Core 应用程序,支持静态文件,如 HTML,图像,CSS 和 JavaScript 文件. 静态文件默认情况下,Asp.Net Core 应用程序不会提供静态文件. 静态文件的默认目录是wwwroot,此目录必须位于项目文件夹的根目录中. 将图片复制并粘贴到 wwwroot 文件夹中.我们假设文件的名称是 banner.jpg.为了能够从浏览器访问此文件,路径为:http://{{serverName}}/b…

霸气！Nginx 中缓存静态文件秘籍

导读这篇教程说明你应该怎样配置 nginx.设置 HTTP 头部过期时间,用 Cache-Control 中的 max-age 标记为静态文件(比如图片. CSS 和 Javascript 文件)设置一个时间,这样用户的浏览器就会缓存这些文件.这样能节省带宽,并且在访问你的网站时会显得更快些(如果用户第二次访问你的网站,将会使用浏览器缓存中的静态文件). 1.准备事项我想你需要一个正常工作的 nginx 软件,可以查看另一篇的帖子:在 Ubuntu 16.04 LTS 上安装 Nginx,P…

Flask初级（四）flash在模板中使用静态文件

Project name :Flask_Plan templates: 默认设置下,Flask在程序根目录中名为static的子目录中寻找静态文件. 随便找个图片放进去把,命令test.png Flask_Plan/static/test.png 修改模板文件Flask_Plan/templates/plan.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF…

在express中提供静态文件笔记

在express中提供静态文件要在express框架中提供静态文件,如:css.javascript等文件,就要使用到他的内置中间件功能express.static,将包含静态文件目录文件传递给express.static就可以了:如果你的javascript文件在public文件夹里面,就可以这样: app.use(express.static('public')); 也可以这样: app.use('/static', express.static('public')); 但是,你提供给ex…

django中的静态文件

静态文件 1.什么是静态文件在django中静态文件是指那些图片.css样式.js样式.视频.音频等静态资源. 2.为什么要配置静态文件这些静态文件往往不需要频繁的进行变动,如果我们将这些静态文件的路径写死,则不利于后期我们的操作.因此,我们需要在django中配置一下静态文件的路径,以便日后对静态文件的操作. 3.如何在django中配置静态文件 1)在setting.py中最下方配置如下数据: STATIC_URL = '/static/' # 就是为静态文件的绝对路径起了一个别名,以后…

vue cli 构建的 webpack 项目设置多页面

1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一个实例. new HtmlWebpackPlugin({ // 打包后文件名 filename: 'index.html', // html模板 template: './src/views/index.html', // 打包后文件引入位置,['body'|'head'],这里的true等同于bo…

vue cli搭建项目及文件引入

cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些 2.cnpm i -g vue-cli //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用. 3.vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,proje…

vue初步构建项目

新建项目文件夹在当前文件夹打开命令行工具(shift+右键-->在次此处打开命令窗口) npm install -g vue-cli npm init webpack npm install npm run dev 建成后的项目结构如下; . ├── build/ # webpack配置文件 │ └── ... ├── config/ │ ├── index.js # 主要项目配置 │ └── ... ├── src/ │ ├── main.js # 应用入口文件 │ ├── App.vue…

基于electron+vue+element构建项目模板之【改造项目篇】

1.概述开发平台OS:windows 开发平台IDE:vs code 上一篇中已完成了electron-vue项目的创建,本篇章中则介绍在此项目基础上进行取消devtools的安装.项目结构的改造.环境变量的配置以及elementui的集成等. 2.取消devtools的安装上一篇中在启动electron-vue项目时,会等待一段时间后才正常启动应用,此时查看控制台日志能看出来是它请求安装devtools失败后的5次尝试,现在我们取消deltools的安装以换来启动的第一次提速. 打开src…

vue框架构建项目流程

构建项目流程: 1.全局查询:node -v 2.全局初始化:npm install --global vue-cli 3.模块化工程:vue init webpack myapp--->y,n,n,n / vue init webpack-simple vuedemo02-->y : 4.进入项目文件:cd my-project 5.安装依赖模块:npm install 或者cnpm install 或者 yarn install 安装淘宝镜像cnpm: 在cmd中输入np…

Vue -cli 入门 --项目搭建(一)

一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及npm环境变量. 检验是否安装成功,在cmd输入命令 node -v,回车及 npm -v,回车,如出现下图所示版本信息,表示安装成功二.安装 Vue-cli 打开cmd命令行工具,输入npm install -g vue-cli,回车全局安装vue-cli (注:npm会有点慢,建议更改为国内淘…

解决@vue/cli 创建项目是安装chromedriver时失败的问题

最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用工作中常见问题汇总及解决方案 npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 安装的,由于@vue/cli安装chromedriver失败,文件目录结构都不完整,所以必须一步成功,不能后面再装chromedriver.看了一下chr…

Vue CLI 创建项目

使用命令创建VUE项目运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作.你必须通过 winpty vue.cmd create hello-world 启动这个命令.不过,如果你仍想使用 vue create hello-world,则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名. alias vue='winpt…

基于electron+vue+element构建项目模板之【自定义标题栏&右键菜单项篇】

1.概述开发平台OS:windows 开发平台IDE:vs code 本篇章将介绍自定义标题栏和右键菜单项,基于electron现有版本安全性的建议,此次的改造中主进程和渲染进程彼此语境隔离,通过预加载(preload.js)和进程间通信(ipc)的方式来完成. 2.窗口最大化一些应用在实际情况中,希望启动的时候就以窗口最大化的方式呈现,BrowserWindow对象提供了窗口最大化的方法:win.maximize(),具体如下所示: const win = new BrowserWindo…

基于electron+vue+element构建项目模板之【创建项目篇】

1.概述 electron:使用javascript.css.html构建跨平台的桌面应用程序 vue:数据驱动视图中的一款渐进式的javascript框架 element:基于vue的桌面端UI组件库开发平台OS:windows 开发平台IDE:vs code 构建项目模板由创建项目.改造项目.自定义标题栏.打包项目等几个篇章组成,最终产出物是将electron.vue.element三者结合起来,构建出来的一款现代化的桌面应用程序模板.在构建项目之前需具备nodejs.vue-cli环境基…

vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.env.js 我们需要做配置的就是第一个和第三个. 其实这两个文件内容就是针对生产环境和发布环境设置不同的参数的文件,那么打开dev.en.js,开发环境.原本代码如下: ‘use strict‘ const merge = require(‘webpack-merge‘) const prodEnv…

vue cli搭建项目

1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件夹: vue init webpack(webpack-simple如果是安装简单版的以后就会自己配置一些东西) 工程名称 5.最后再在文件里下载依赖: npm install 6.目录结构差不多就是这样:…

在JavaWeb项目中处理静态文件或动态链接拼接网站地址的最优处理方案

在开发网站时候我们会遇到下面问题? - 在引用网页中引用js和css或者动态的Servlet的时候我们是写绝对路径还是相对路径? - 如果写相对路径吧,上线偶尔会报404,还要手动去拼接绝对路径 - 如果写绝对路径吧,你在本地写的时候肯定的是localhost:8080/xxx/xxx,项目上线的时候你又要把网页中的这个替换为你的上线域名,体验很糟糕我们怎么解决这样的问题呢? 我们可以在网页中使用Request对象来获取网页中的各种地址信息. - request.getServletPath(…

django项目部署在Apache服务器中，静态文件路径的注意点

django Apache部署静态文件的路径注意点静态文件放在对应的 app 下的 static 文件夹中或者 STATICFILES_DIRS 中的文件夹中. 当 DEBUG = True 时,Django 就能自动找到放在里面的静态文件.(Django 通过 STATICFILES_FINDERS 中的“查找器”,找到符合的就停下来,寻找的过程类似于 Python 中使用 import xxx 时,找 xxx 这个包的过程). 我们部署完项目后,DEBUG的值会改为False,这个时候…

【vue-cli构建项目在index.html中使用静态文件】的更多相关文章