解决 Webpack 打包 Vue 应用时遇到的一些问题

在前端开发中，使用 Vue.js 框架可以帮助我们更高效地实现 Web 应用的开发。Vue 应用的打包工具大多使用 Webpack。然而，当我们打包 Vue 应用时，会遇到一些问题，本文将介绍如何解决这些问题。

问题一：使用 Vue CLI 创建项目后启动报错

在使用 Vue CLI 创建项目后，有时会出现启动报错的情况，常见的错误如下：

• Can't resolve 'vue'：找不到 Vue 模块。
• Module build failed: Error: Couldn't find preset "env" relative to directory：缺少 Babel 的 env preset。
• ...

其中，第一个错误多发生在使用 @ 别名时，导致 Webpack 找不到 Vue 模块。解决方法是使用 vue/dist/vue.esm.js 代替 vue。修改 webpack.config.js 如下所示：

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  },
},

第二个错误则缺少 babel-preset-env，需要在项目根目录创建 .babelrc 文件，并添加如下内容：

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

问题二：打包后引入的 Vue 为 Runtime-only 版本

在使用 Vue CLI 打包项目时，默认使用的是 Runtime-only 版本，如果需要使用完整版，需要在 webpack.config.js 中添加以下代码：

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js',
    },
  },
};

问题三：打包后页面空白

在打包后访问页面时，页面出现空白，此时需要在 webpack.config.js 中添加以下代码：

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js',
    },
  },
  externals: {
    vue: 'Vue',
  },
};

问题四：打包后图片显示不出来

在 Vue 模板中引入图片时，如下所示：

<img src="./assets/logo.png" alt="">

在使用 Webpack 打包时，需要安装 file-loader 和 url-loader 两个依赖，在 webpack.config.js 中添加以下代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: 'img/[name].[hash].[ext]',
        },
      },
    ],
  },
};

url-loader 会将小于 8KB 的图片转化为 dataURL，大于 8KB 的图片则会交由 file-loader 处理，将其打包到输出目录。

总结

在使用 Vue 打包工具 Webpack 进行 Vue 应用开发时，会遇到各种问题。针对一些常见的问题，本文提供了详细的解决方法和相关代码示例，希望能对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6590f16deb4cecbf2d630621