Vue如何指定不编译的文件夹和favicon.ico

目录
  • 指定不编译的文件夹和favicon.ico
    • 这里简单区分一下Vue2.0中的assets和static区别
    • 指定项目的favicon.ico
  • favicon.ico不能正确显示问题
    • 方法一：修改index.html文件
    • 方法二：修改webpack配置文件

指定不编译的文件夹和favicon.ico

在Vue3.0中引入public文件夹，不希望被编译的文件都可以放到这个文件夹下，但是在vue2.0中实现类似的功能，需要自己在webpack.prod.conf.js中做一些配置

这里简单区分一下Vue2.0中的assets和static区别

  • assets:各组件中的依赖项，会被编译
  • static:不会被编译，原样放到dist文件夹下

言归正传，假设不希望被编译的文件全部放在public下，要修改的地方是webpack.prod.conf.js

// copy custom static assets
new CopyWebpackPlugin([
    //---static文件夹下的文件也不会被编译
    {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
    },
    {
        from: path.resolve(__dirname, '../public'),
        to: path.resolve(__dirname, '../dist'),
        ignore: ['.*']
    },
    //---这里还能指定特定文件输出的位置和文件名
    {
        from: path.resolve(__dirname, '../public/strings-en.js'),
        to: path.resolve(config.build.assetsRoot, 'strings.js'),
        ignore: ['.*']
    }
])

指定项目的favicon.ico

同样是修改webpack.prod.conf.js

new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    favicon: 'favicon.ico',   //------favicon的路径
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
}),

favicon.ico不能正确显示问题

首先将favicon.ico图片放在根目录下，通过以下两种方法使其显示正确。

方法一：修改index.html文件

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" rel="external nofollow" />

方法二：修改webpack配置文件

1、找到build下的webpack.dev.conf.js文件

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: path.resolve('favicon.ico') // 增加
    }),

2、找到build下的webpack.prod.conf.js文件

 new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: path.resolve('favicon.ico'), //新增
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        ...
    }),

修改配置文件后重启npm run dev，大功告成。

注意：如果打包发布到线上，会导致ico图标不显示的问题，是因为执行npm run build打包后只有static文件夹和index.html文件，找不到根目录下的ico图标，解决办法：把ico图标放到static文件夹下就OK啦。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli3配置favicon.ico和title的流程

    一.如果是单页面程序 public目录下有个index.html和favicon.ico ico的路径 二.如果是多页面程序 publc目录下放ico图标 public下的index页面 然后在vue.config.js里的page配置ico的路径 补充知识:Vue-cli3的favicon修改不了 在vue.config.js中配置下如下代码,重跑下项目就行了 // 以下是pwa配置 pwa: { iconPaths: { favicon32 : 'faviconfc.ico', favico

  • vue项目总结之文件夹结构配置详解

    vue项目总结之文件夹结构配置详解

    前言 之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化.规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助. 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.下面随着小编来一起学习学习吧. 项目配置 首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉.本次开发使用到的有: vue , vuex , axios , elementUI .

  • 解决Vue 项目打包后favicon无法正常显示的问题

    在开发中经常需要为项目添加favicon以增加网站辨识度,在使用Vue开发中出现添加的favicon.ico无法显示问题,如下给出解决方法: 问题分析: 问题根源在于路径,如果使用http链接作为favicon地址一般不是出现问题,出现问题的基本在使用本地图片作为favicon. 如下常规配置: 在项目中使用大家常用的经典将图片文件与应用的index.html放在项目的根目录下,同时在index.html中正确配置favicon路径. 项目启动后会发现该中配置方式并没有生效: 打包后的项目同样存

  • vue小图标favicon不显示的解决方案

    vue小图标favicon不显示的解决方案

    vue脚手架虽然好用,但是文件配置问题一直很头疼. 将原生的代码用vue框架来做,出现种种问题,之前设置小图标的时候也出现了问题,总结了网上的解决方案,在此记下对我亲自试验并奏效的方案: 我是直接将favico.ico丢到根目录(就是src同级的目录),然后进行在build/webpack.dev.conf.js文件配置 1.webpack.dev.conf.js文件里plugins里加入这段代码 new HtmlWebpackPlugin({ filename: 'index.html', t

  • vue favicon设置以及动态修改favicon的方法

    最近写公司项目时,动态更新favicon 动态更新之前需要有一个默认的favicon. 目前vue-cli搭建的vue项目里面已经有了一个static文件夹,存放静态文件. favicon图片放到该文件夹下. 然后再index.html中添加: <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" rel="external nofollow

  • Vue如何指定不编译的文件夹和favicon.ico

    目录 指定不编译的文件夹和favicon.ico 这里简单区分一下Vue2.0中的assets和static区别 指定项目的favicon.ico favicon.ico不能正确显示问题 方法一:修改index.html文件 方法二:修改webpack配置文件 指定不编译的文件夹和favicon.ico 在Vue3.0中引入public文件夹,不希望被编译的文件都可以放到这个文件夹下,但是在vue2.0中实现类似的功能,需要自己在webpack.prod.conf.js中做一些配置 这里简单区分

  • 多个vue项目实现共用一个node-modules文件夹

    多个vue项目共用一个node-modules文件夹 问题背景 一个目录下有多个vue项目. >> root     -- my-vueproject-a         -- package.json         -- node-modules     -- my-vueproject-b         -- package.json         -- node-modules ... 期望结果 将所有vue项目中的依赖包提取为一个 >> root     -- my-

  • Append打开指定文件夹中的数据文件就象这些文件在当前文件夹中一样

    允许程序打开指定文件夹中的数据文件就象这些文件在当前文件夹中一样.如果在没有参数的情况下使用,则 append 命令显示附加的目录列表. 语法 append [;] [[Drive:]Path[;...]][/x:{on|off}][/path:{on|off}] [/e] 参数 取消附加文件夹列表. [Drive:}Path 指定要附加到当前文件夹的驱动器和文件夹.如果未指定驱动器,将默认使用当前驱动器.可以指定 [Drive:]Path 的多个项,各项之间要用分号隔开. /x:{on | o

  • 详解Jquery EasyUI tree 的异步加载（遍历指定文件夹，根据文件夹内的文件生成tree）

    Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)具体代码如下: private void SMT(HttpContext context) { string SqlConnection82 = System.Configuration.ConfigurationManager.AppSettings["LocalConnectionString"]; string path = context.Server.MapPath(@"

  • python批量创建指定名称的文件夹

    本文实例为大家分享了python批量创建指定名称的文件夹具体代码,供大家参考,具体内容如下 继删除多余文件之后,做了一些数据处理,需要重新保存数据,但文件夹的名称又不能改 所以只能创建新的文件夹,换个路径用之前的文件夹名 import os import glob #txt文件生成一次就好,或者用os.walk遍历需要的文件夹名称路径 def mk_text(txt_path): folders = glob.glob(txt_path + '/*_1') writeText = open('F

  • 使用脚本实现自动清除指定文件夹下丢失链接文件的符号链接

    使用脚本实现自动清除指定文件夹下丢失链接文件的符号链接 脚本可清除,指定文件夹下,对视链接文件的符号链接. 在使用Linux时,常常会为自己许多文件或者程序建立符号链接,这样就不用每次都到对应的文件夹下去寻找对应的文件而只需要对需要经常访问的文件建立符号链接就可以了,这样就能把你常需要访问的文件放到桌面上,或者指定到另外一个文件夹中. 这样访问时,方便了很多,但是用完之后往往留下许多的符号链接,这些链接需要用户自己手动确认是否可以删除,为linux的使用带来很多的不方便,使用该脚本就能解放你的双

  • 解析VC中预编译头文件的深入分析

    一.为什么预编译头文件:预编译头的概念: 所谓的预编译头就是把一个工程中的那一部分代码,预先编译好放在一个文件里(通常是以.pch为扩展名的),这个文件就称为预编译头文件这些预先编译好的代码可以是任何的C/C++代码,甚至是inline的函数,但是必须是稳定的,在工程开发的过程中不会被经常改变.如果这些代码被修改,则需要重新编译生成预编译头文件.注意生成预编译头文件是很耗时间的.同时你得注意预编译头文件通常很大,通常有6-7M大.注意及时清理那些没有用的预编译头文件.也许你会问:现在的编译器都有

  • Python实现拷贝/删除文件夹的方法详解

    本文实例讲述了Python实现拷贝 删除文件夹的方法.分享给大家供大家参考,具体如下: 1. 拷贝文件夹 from shutil import copytree, ignore_patterns copytree(source, destination, ignore=ignore_patterns('*.pyc', 'tmp*')) 注:shutil.copytree实现 def copytree(src, dst, symlinks=False, ignore=None): names =

  • IDEA将Maven项目中指定文件夹下的xml等文件编译进classes的方法

    IDEA将Maven项目中指定文件夹下的xml等文件编译进classes的方法

    出处:https://www.cnblogs.com/SunSpring eclipse下面创建的Maven项目,使用mybatis.eclipse里面能正常启动,在idea中一直卡在maybatis 加载位置. 1.首先是不报错也没反应.这个时候需要我们重写SqlSessionFactoryBean 让错误显示出来. public class BeanFactory extends SqlSessionFactoryBean { @Override protected SqlSessionFa

随机推荐