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


    Vue日常踩坑日常 —— 在index.html中引入静态文件不生效问题

    本文针对的是Vue小白,不喜勿喷,谢谢

    出现该问题的标志如下

    控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html

    出现的原因及解决办法

    第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static

    第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的static更改为你自己所创建的静态资源目录,由于网上大多教程所改的地方都不够完全,还是会出现该问题,所以这也是今天为什么要写这篇文章的原因。

    需要更改的有3个文件,分别是config文件夹下的index.js,build文件夹下的webpack.dev.conf.jswebpack.prod.conf.js

    假如你的静态资源文件夹叫public,和src文件夹同级,需要修改的如下

    1. index.js

      dev: {
        assetsSubDirectory: 'public',//原本是static,现在改为public
        assetsPublicPath: `/${name}/`,
        
        ...
        
      build: {
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'public',//原本是static,现在改为public
    

    2. webpack.dev.conf.js

        // copy custom static assets
        new CopyWebpackPlugin([
          {
            //下面原本是static,现在改为public
            from: path.resolve(__dirname, '../public'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
          }
        ])
    

    3. webpack.prod.conf.js

        // copy custom static assets
        new CopyWebpackPlugin([
          {
            //下面原本是static,现在改为public
            from: path.resolve(__dirname, '../public'),
            to: config.dev.assetsSubDirectory,
            ignore: ['.*']
          }
        ])
    

    Ps:有任何问题欢迎在评论区探讨

  • 相关阅读:
    《人月神话》阅读笔记3
    第十五周总结
    《人月神话》阅读笔记2
    对正在使用的输入法评价
    课堂练习(找水王问题)
    第二阶段冲刺第十天
    第二阶段冲刺第九天
    第二阶段冲刺第八天
    第二阶段冲刺第七天
    openwrt U盘启动
  • 原文地址:https://www.cnblogs.com/linwene/p/10788617.html
Copyright © 2020-2023  润新知