webpack 不打包static_webpack 不打包 static - CSDN
精华内容
参与话题
  • vue项目中,static文件夹里面的资源不会被打包,所以我们可以将需要被webpack打包的资源放在static中,然后在index.html中引用 我在static文件夹中,有一个名为baseURL.js的文件 在vue项目的index.html下引入...

    vue项目打包之后静态资源空白问题解决
    在这里插入图片描述
    在这里插入图片描述
    webpack不打包特定的静态资源
    vue项目中,static文件夹里面的资源不会被打包,所以我们可以将不需要被webpack打包的资源放在static中,然后在index.html中引用
    在这里插入图片描述
    我在static文件夹中,有一个名为baseURL.js的文件
    在vue项目的index.html下引入baseURL.js
    在这里插入图片描述
    在这里插入图片描述
    baseURL.js文件的主要作用是用来配置请求后端接口的地址,因为我司的项目需求是,前后端都是对外的,会部署在客户的仓库,所以每次后端的地址都会变。因此使webpack不打包baseURL.js,这样就可以避免没都得重新打包一遍

    展开全文
  • webpackstatic和assets目录区别

    千次阅读 2017-09-15 16:03:01
    可以发现,页面中使用绝对路径时,图片文件不会被打包进js,图片文件需要被原原本本以图片格式存在static目录下,如果修改static中图片文件名,会导致页面找到图片。 图三:ctrl+h查找相对路径在所出...




    图一:引用了三个图片,前两个是绝对路径,后一个是相对路径。




    图二:ctrl+h查找绝对路径在所出的包里面的位置。可以发现,页面中使用绝对路径时,图片文件不会被打包进js,图片文件需要被原原本本以图片格式存在static目录下,如果修改static中图片文件名,会导致页面找不到图片。




    图三:ctrl+h查找相对路径在所出的包里面的位置。可以发现,使用相对路径引用static中的图片文件会被打包进js中,即使删掉static中的图片,页面依然能展示图片,因为打包后的页面不只是图片路径而是完整的图片文件数据。


    总:webpack默认将static目录的文件原原本本输出,所以当页面要使用绝对路径时,图片就需要放在static目录。如果用了相对路径,图片仍然放在static,static目录的图片被打包出来也没有多大意义,删了也不会影响图片展示。所以一般assets目录存相对路径用的图片,static存绝对路径用的图片。相对目录的图片在出包后由于被打包进js,不方便更换图片,而绝对路径的图片没有被打包进js而是在static文件夹下,所以可以随时更换。就是网上所说的,static放有可能经常被更换的图片(商品图片之类),assets放组件使用的图片(如一些menu的背景图片等)。其实主要区别在于是以原来的文件目录输出,还是打包进js里面。需要以原文件格式输出的目录可以在webpack中配置,不一定都输出在static目录,具体怎么配置目前还没搞清楚。

    展开全文
  • webpack设置不打包文件

    千次阅读 2019-04-02 23:44:51
    要实现webpack打包后,一个全局配置文件被打包。最终目的是我们可以在打包后的文件中修改这个文件(比如配置全局请求url前缀等等) 实现 1. 安装依赖 npm i copy-webpack-plugin -s 2. 引入依赖 需要在webpack...

    一、需求

    要实现webpack打包后,一个全局配置文件不被打包。最终目的是我们可以在打包后的文件中修改这个文件(比如配置全局请求url前缀等等)。

    要实现这个功能需要两步操作。

    • 1、 复制不打包文件
    • 2、 引入文件

    二、复制文件

    这里的复制文件指将无需打包的文件复制至打包后的静态文件

    1. 安装依赖

    npm i copy-webpack-plugin -s
    

    2. 引入依赖

    需要在webpack配置文件中引用并配置。

        const CopyWebpackPlugin = require('copy-webpack-plugin')
    

    3. webpack-plugins配置

    以下代码需放在webpack配置的plugins数组中

    new CopyWebpackPlugin([
        {
            from: resolve(__dirname, './static'), // 不打包直接输出的文件
            to: 'static', // 打包后静态文件放置位置
            ignore: ['.*'] // 忽略规则。(这种写法表示将该文件夹下的所有文件都复制)
        }
    ]),
    

    三、引入文件

    在html中引入不打包的配置文件,一般不打包文件都放在根目录下的static文件夹中,打包后放在dist文件夹。在html文件中使用script标签引用即可。

    注意

    不要使用require或者import的方式引入文件,否则该文件就会参与打包,从而使打包后修改配置的操作失效。

    有什么问题欢迎留言~

    END

    展开全文
  • 打包好的项目部署到服务器,发现报错说图片找到。 静态资源如js访问到 分析并且解决问题 明确一点的就是,看到报错404,找到静态资源,很明显,路径错误了。  静态资源找到如js文件 资源打包路径...

    文章有点长,希望能够阅读下去,有所帮助。

    问题

    1. 将打包好的项目部署到服务器,发现报错说图片找不到。
    2. 静态资源如js访问不到

    分析并且解决问题

    明确一点的就是,看到报错404,找不到静态资源,很明显,路径错误了。 


    静态资源找不到如js文件

    资源打包路径有误,打包后的资源使用了绝对根目录路径,因此将项目部署到特定目录下,其引入的资源路径无法被正确解析。

    解决:

    找到config下面的index.js文件,将划线处改为如下样子。

    之前是根目录,肯定找不到文件,我们改成相对目录即可。打包后,去看看index.html中引入的文件就知道变化了。

    图片找不到

    首先我们来看一下我们打包后生成的文件目录:

     上面的报错,要是没有static/css就完全可以找到图片了。但是为什么有的图片能够找得到有的图片找不到呢,同样的方法写在css文件里面。这里我们就要了解一下webpack在打包我们的文件时候进行的操作了。

    webpack打包limit限制

    limit值为10000,表示字节。什么作用呢?就是小于这个字节限制的,不是不打包,而是转化为base64(css样式中,图片的代码变成了一堆字符)。大于的话就正常打包,加上7位hash值,就变成如下路径。

    跑到了img下面去了,img这个名字就是我们上面webpack配置的。这样路径就不对了,所以找不到图片。

    从源头分析问题

    在vue项目中,我们打包生成项目,跑命令如下。

    npm run build

    那么,我们就看看在执行这个命令中,运行的代码,以此入手。找到config下面的index.js文件

    打包后生成的文件代码:

    最开始,我们的assetsPublicPath值为'/',表示根目录,我们看看打包后的文件样子。

    这样直接从根目录获取,我们将项目部署到服务器上都是有名字的,这样直接到服务器根目录肯定不能获取。

    解决图片路径错误办法

    在build文件夹下面找到utils.js文件,如下图

    新增红色的部分,这样打包的样子就变成../../static的样子了,就可以解决我们的问题。

    一起交流学习吧~~

     

    展开全文
  • webpack不打包特定的文件

    千次阅读 2019-06-18 14:50:55
    使用vue+webpack创建项目的时候会自动生成一个static文件夹,在static文件夹里面我们可以放一些会经常变化的文件或者照片啥的,但是用的时候需要写上绝对路径。由于项目需要,在开发时的接口地址跟部署的接口地址...
  • vue脚手架写完代码后,要打包部署(打包)到web服务器上。 1、运行命令 npm run build。就完了,一步搞定。 下面说一下vue脚手架中webpack打包原理: 1、针对静态资源: 很多人会把静态资源一部分存放在src...
  • webpack打包后图片显示问题

    千次阅读 2018-05-04 13:22:42
    test是正则匹配规则,匹配项目中所有的以正则规则结尾的格式的文件,然后通过url-loader进行处理,大于10kb就会进行base64转码,就是将图片转为base65格式,如果超过10KB的图片就单独打包到utils.assetsPath(‘img...
  • 在项目中有时候需要保留一些文件被编译压缩,比如一些配置文件,我们需要在打包后仍然可以更改配置文件并生效。 这时候我们可以通过webpack的插件copy-webpack-plugin,保留某一文件夹下的的所有文件。 二、使用...
  • 前言 最近在用vue-cli+webpack做项目,项目架构搭好了之后,想build之后看看效果,但是...但是我项目如果部署到线上也一定是在根目录里呀,所以这种默认相对于根目录的绝对路径肯定是实用的; 解决方案 ...
  • 修改vue-cli脚手架生成的build文件夹下的utils.js的publicPath:'../../'if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../'...
  • vue-cli项目打包多个与static文件同级的静态资源目录(copy-webpack-plugin插件的使用)场景重点意淫 场景 业务要求能够直接通过 “域名+/file”的方式访问静态资源的html,然而产品绝对static暴露在url中好看又...
  • 关于 copy-webpack-plugin 的用处和使用

    千次阅读 2019-06-21 11:11:58
    webpack打包的时候, 使用 html-webpack-plugin ,在template指定的demo.html 里面 引入的本地的一些script 文件,打包之后,总是会报这里文件找到,看下面: //这是在这个demo.html里面引入的 本地test.js 文件 &...
  • 在使用vue-cli创建vue项目时,可以自动生成webpack文件。使用 npm run build 即可打包发布生产文件,打包后的文件 可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件...
  • Vue项目webpack打包部署到服务器

    万次阅读 热门讨论 2017-06-09 18:37:16
    Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。必须要配置...
  • vue cli搭建的项目,在本地测试调试都OK,运行npm run dev之后运行正常,run build后放到线上找到静态资源文件路径,最后终于解决
  • 查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大,剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer==(可视化视图查看器)== 介绍1:webpack-bundle-...
  • vue-cl3脚手架生成的项目,静态资源要是想经过webpack打包,那么应该放置在public 文件夹下面。先说说vue-cl3 静态资源可以通过两种方式进行处理: 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。...
  • 在vue中用webpack打包之后运行文件问题以及相关配置

    万次阅读 热门讨论 2017-03-15 14:17:31
    最近在用vue写一个小项目,其中就用到了vue脚手架工具vue-cli,在测试打包后能否运行过程中遇到不少问题,而且在网上这些问题答案都太好找,废话多说,进入正题。 a.执行打包命令:npm run build  b.打包之后...
  • Webpack打包font-awesome

    万次阅读 2017-05-13 16:35:33
    使用webpack构建font-awesome或者bootstrap的时候,最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引入字体文件: 1. 首先安装依赖: npm install style-...
  • vue项目webpack打包后找不见favorite.icon

    千次阅读 2018-06-26 16:55:26
    解决办法:1.将 .icon放在vue-cli脚手架生成的static文件夹下;...lt;link rel="shortcut icon" type="image/x-icon" href="...3.修改webpack配置文件webpack.dev.conf.j...
1 2 3 4 5 ... 20
收藏数 9,852
精华内容 3,940
关键字:

webpack 不打包static