Vue-CLI 3中Webpack配置及Fetch请求错误返回index.html问题咨询

一、为什么请求错误路径的CSV会返回index.html？ #

这是Vue-CLI默认的SPA（单页应用）配置导致的——不管是开发环境的devServer还是生产环境部署，服务器都会把所有未匹配到资源的请求重定向到index.html，目的是支持前端路由（比如Vue Router的history模式）。所以当你的CSV路径错误时，服务器找不到对应资源，就返回了index.html。

解决步骤： #

1. 修正资源存放路径与请求路径

   • 静态资源（比如CSV）应该放在项目根目录的public文件夹下，这个目录里的文件会被直接复制到构建后的dist根目录，不需要经过Webpack编译。
   • 举个例子：如果把my.csv放在public/data/下，那么正确的请求路径应该是/data/my.csv（注意开头的斜杠，代表网站根目录）。
   • 验证方法：直接在浏览器地址栏输入这个URL，如果能下载到CSV文件，说明路径正确；如果还是返回index.html，那就是路径没配对。

2. 完善Fetch请求的错误处理
   你的代码里漏了await（text()是异步方法），同时要判断响应状态，避免把错误的响应内容当成CSV处理：

   try {
     const response = await fetch('/data/my.csv');
     // 先判断请求是否成功
     if (!response.ok) {
       throw new Error(`请求失败，状态码：${response.status}`);
     }
     const val = await response.text(); // 这里必须加await
     console.log(val); // 现在就能拿到正确的CSV内容了
   } catch (error) {
     console.error('获取CSV失败：', error);
   }
   

3. 生产环境部署时的额外配置（以Nginx为例）
   如果部署到Nginx，默认的SPA配置会把所有请求都导向index.html，需要修改配置让静态资源请求返回404而不是index.html：

   server {
     # 其他配置...
     location / {
       try_files $uri $uri/ /index.html; # 支持前端路由
     }
     # 针对静态资源（比如CSV、图片等），直接返回对应资源或404
     location ~* \.(csv|json|png|jpg|svg)$ {
       try_files $uri =404;
     }
   }
   

二、Vue-CLI3中配置Webpack的方法 #

Vue-CLI3封装了Webpack配置，不需要直接修改原始的webpack.config.js，而是通过项目根目录的vue.config.js来进行自定义配置：

1. 创建vue.config.js #

如果项目里没有这个文件，直接在根目录新建即可，Vue-CLI会自动识别它。

2. 常用配置示例 #

方式一：直接修改Webpack配置（configureWebpack）

适合简单的配置修改，比如添加插件、修改入口等：

const webpack = require('webpack');

module.exports = {
  // 开发服务器配置
  devServer: {
    port: 8081, // 修改开发服务器端口
    open: true // 启动时自动打开浏览器
  },
  // 直接修改Webpack配置
  configureWebpack: {
    plugins: [
      // 添加全局变量
      new webpack.DefinePlugin({
        'process.env.MY_CUSTOM_VAR': JSON.stringify('hello world')
      })
    ],
    // 修改resolve别名
    resolve: {
      alias: {
        '@': require('path').resolve(__dirname, 'src')
      }
    }
  }
};

方式二：链式修改Webpack配置（chainWebpack）

适合更精细的配置调整，比如修改loader规则、调整插件参数等：

module.exports = {
  chainWebpack: config => {
    // 关闭预加载插件
    config.plugins.delete('preload');
    
    // 修改svg文件的loader规则
    config.module
      .rule('svg')
      .exclude.add(require('path').resolve(__dirname, 'src/icons'))
      .end();
    
    // 为src/icons下的svg文件添加自定义loader
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(require('path').resolve(__dirname, 'src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      });
  }
};

3. 查看当前Webpack配置 #

可以通过vue inspect命令查看Vue-CLI生成的完整Webpack配置，比如：

# 把配置输出到文件
vue inspect > webpack-config.txt

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