vue-cli3.0修改打包后的文件名和文件地址后运行报错怎么解决

在使用 Vue CLI 3.0 进行项目开发时，我们经常需要对打包后的文件名和文件地址进行自定义配置。然而，修改这些配置后，有时会导致项目运行时报错。本文将详细介绍如何解决这些问题。

1. 修改打包后的文件名和文件地址

在 Vue CLI 3.0 中，我们可以通过 vue.config.js 文件来修改打包后的文件名和文件地址。以下是一个简单的配置示例：

module.exports = {
  outputDir: 'dist', // 打包后的文件输出目录
  assetsDir: 'static', // 静态资源目录
  filenameHashing: false, // 关闭文件名哈希
  configureWebpack: {
    output: {
      filename: 'js/[name].js', // 修改 JS 文件名
      chunkFilename: 'js/[name].js' // 修改 chunk 文件名
    }
  },
  chainWebpack: config => {
    config.plugin('extract-css').tap(args => {
      args[0].filename = 'css/[name].css'; // 修改 CSS 文件名
      args[0].chunkFilename = 'css/[name].css'; // 修改 CSS chunk 文件名
      return args;
    });
  }
};

2. 常见报错及解决方法

2.1 报错：Cannot GET /

原因：修改了 outputDir 或 assetsDir 后，项目的静态资源路径发生了变化，导致服务器无法正确加载资源。

解决方法：确保 publicPath 配置正确。publicPath 是项目部署的基础路径，通常需要根据项目部署的环境进行配置。例如：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-project-name/' : '/'
};

2.2 报错：Failed to load resource: net::ERR_FILE_NOT_FOUND

原因：修改了 filenameHashing 或 output.filename 后，文件的路径或名称发生了变化，导致浏览器无法正确加载资源。

解决方法：确保 filenameHashing 和 output.filename 的配置一致，并且路径正确。例如：

module.exports = {
  filenameHashing: true, // 开启文件名哈希
  configureWebpack: {
    output: {
      filename: 'js/[name].[hash].js', // 使用哈希值
      chunkFilename: 'js/[name].[hash].js' // 使用哈希值
    }
  }
};

2.3 报错：Uncaught SyntaxError: Unexpected token <

原因：修改了 output.filename 或 extract-css 后，文件的 MIME 类型不正确，导致浏览器无法正确解析文件。

解决方法：确保服务器正确配置了 MIME 类型。例如，在 Nginx 中，可以添加以下配置：

location / {
  types {
    text/css css;
    application/javascript js;
  }
}

3. 总结

在 Vue CLI 3.0 中，修改打包后的文件名和文件地址是一个常见的需求，但也容易引发各种报错。通过合理配置 vue.config.js 文件，并确保服务器配置正确，可以有效避免这些问题。希望本文能帮助你顺利解决 Vue CLI 3.0 打包后的报错问题。