Vue axios引用报错？解决办法，这几个步骤让你彻底搞定

2023-03-15 21:22:40

Vue.js中使用axios引发的Module Parse Failed错误：轻松搞定！

在使用Vue.js框架和axios库进行前端开发时，你可能会遇到恼人的Module Parse Failed: Unexpected token (5:2) 错误。别担心，这个错误并不可怕，我们只需要对webpack配置做一些调整就能轻松解决它。

1. 安装所需的Loader

webpack是一个模块打包器，它需要加载器来处理不同的文件类型。对于Vue.js项目，我们需要安装以下加载器：

babel-loader：将ES6+代码转换为ES5
vue-loader：将Vue.js组件转换为JavaScript

npm install --save-dev babel-loader vue-loader

2. 配置Webpack

在你的webpack.config.js文件中，添加以下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
};

3. 重新运行Webpack

运行以下命令重新运行webpack：

npm run build

4. 使用CDN

如果你使用CDN加载axios，请确保在你的HTML文件中正确引用了axios.min.js文件：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

5. 使用NPM或Yarn

如果你使用NPM或Yarn安装axios，请确保安装了正确的版本：

npm install axios
yarn add axios

6. 使用Vue-Cli

如果你使用Vue-Cli，请运行以下命令：

npm install --save-dev @babel/core @babel/preset-env @vue/cli-plugin-babel

在你的项目根目录创建.babelrc文件，并添加以下内容：

{
  "presets": ["@babel/preset-env"]
}

在你的项目根目录创建vue.config.js文件，并添加以下内容：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .use('babel-loader')
      .tap(options => {
        return {
          ...options,
          presets: ['@babel/preset-env']
        }
      })
  }
};