• 『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:有任何问题欢迎在评论区探讨

  • 相关阅读:
    WP8.1 UI 编程 四、图形
    分治法 全排列问题的一个Java实现
    合并排序算法时间复杂度分析
    js如何实现复制粘贴功能
    关于<meta name="applicable-device"content="pc">
    ready
    css文字强制大写输入
    关于input,button标签在苹果手机上显示阴影解决办法
    【C#】中用if判断值是否是否为空
    视频格式MP4,需要转码
  • 原文地址:https://www.cnblogs.com/linwene/p/10788617.html
Copyright © 2020-2023  润新知