Vue CLI添加外部JS出现MIME type错误，寻求解决方案

我来帮你搞定这个问题！你遇到的核心问题是Webpack Simple对资源的处理逻辑和你预期的不一样，加上没有正确配置静态资源路径，才导致了404和MIME类型错误。下面给你两种可行的解决方案，按需选择：

方案一：让Webpack处理你的JS文件（推荐） #

Webpack Simple项目里，assets文件夹下的文件会被Webpack编译打包，所以直接在index.html里用<script>引用是行不通的——开发环境下这些文件会被Webpack转存到内存的临时路径，不是你写的/assets/settings.js。

解决步骤：

• 把你的settings.js放在assets文件夹里，修改文件内容，把数组挂载到全局window对象上（这样所有组件都能访问）：

  // assets/settings.js
  window.appSettings = ['item1', 'item2', 'item3']; // 这里替换成你的数组
  

• 打开src/main.js，在开头添加导入语句：

  import './assets/settings.js';
  

• 现在启动项目，你就能在任意组件里通过window.appSettings访问这个数组了，完全不会有404问题。

方案二：创建不被Webpack处理的静态资源目录 #

如果你坚持要在index.html里直接引用外部JS，可以专门建一个Webpack不会编译的静态文件夹：

1. 在项目根目录新建static文件夹，把settings.js放进去。
2. 安装copy-webpack-plugin（用来把静态文件复制到打包目录）：

   npm install copy-webpack-plugin --save-dev
   

3. 修改webpack.config.js，添加插件配置：

   // 先在文件顶部引入插件
   const CopyWebpackPlugin = require('copy-webpack-plugin');
   
   // 找到plugins数组，添加下面的配置
   module.exports = {
     // ...其他配置
     plugins: [
       // ...已有的插件（比如HtmlWebpackPlugin）
       new CopyWebpackPlugin([
         { from: './static', to: './static' }
       ])
     ]
   }
   

4. 在index.html里修改引用路径：

   <script src="/static/settings.js"></script>
   

5. 重启开发服务器，现在这个JS文件就能被正确加载，MIME类型也会自动变成application/javascript，浏览器能正常解析执行。

为什么之前会出错？ #

• 404错误：你直接引用/assets/settings.js，但Webpack已经把这个文件处理成了打包后的资源（开发环境在内存里），原路径根本不存在，服务器返回404页面（MIME类型是text/html）。
• MIME类型错误：因为服务器返回的是404页面（不是JS文件），所以浏览器拒绝执行，改MIME类型只是掩盖了404的问题，自然无法解析JS。

内容的提问来源于stack exchange，提问作者rolfo85