VueJS项目引入d3.js报语法错误，纯HTML项目可正常运行

这个错误其实是Vue CLI（基于webpack构建）和纯静态HTML项目在静态资源处理逻辑上的差异导致的，我之前踩过这个坑，给你拆解下原因和解决方案：

错误本质解析 #

你看到的Unexpected token <，本质是浏览器请求js/d3.js时，并没有拿到对应的JS文件，反而拿到了一段HTML代码（大概率是Vue项目的index.html或者404页面）。浏览器尝试把HTML当作JS解析，自然会在开头的<html>标签处触发语法错误。

为什么纯静态项目没问题？因为纯静态项目里，src="js/d3.js"是相对于当前HTML文件的路径，服务器会直接返回对应文件；但Vue CLI项目的构建规则完全不同：

• 项目根目录下的src文件夹是webpack的模块处理目录，直接用<script>标签引用这里的文件，webpack无法正确解析路径，最终会返回HTML页面。

可行的解决方案 #

方案1：利用Vue CLI的public目录（最简单直接） #

Vue CLI专门提供了public目录存放不需要webpack处理的静态资源，这里的文件会被原封不动拷贝到构建后的dist根目录。

1. 在项目根目录的public文件夹下创建js子目录，把d3.js放进去
2. 在public/index.html里用相对路径引入：

   <script type="text/javascript" src="js/d3.js"></script>
   

这样构建后，路径会被正确解析，浏览器能拿到真实的JS文件。

方案2：通过npm安装d3（Vue项目推荐方式） #

更符合Vue项目的模块化开发习惯，不需要手动管理本地JS文件：

1. 安装d3依赖：

   npm install d3 --save
   

2. 在需要使用d3的Vue组件里引入：

   import * as d3 from 'd3'
   

这种方式webpack会自动处理依赖，还能享受到tree shaking优化（只打包用到的d3模块）。

方案3：配置webpack拷贝静态资源（适合特殊场景） #

如果一定要把d3.js放在src/js目录下，可以通过copy-webpack-plugin把文件拷贝到输出目录：

1. 安装插件：

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

2. 在vue.config.js里配置（如果没有这个文件就新建一个）：

   const CopyWebpackPlugin = require('copy-webpack-plugin')
   
   module.exports = {
     configureWebpack: {
       plugins: [
         new CopyWebpackPlugin({
           patterns: [
             { from: 'src/js/d3.js', to: 'js/d3.js' }
           ]
         })
       ]
     }
   }
   

3. 然后在public/index.html里用src="js/d3.js"引入即可。

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