Vue cli构建及项目打包以及出现的问题解决

下面是Vue CLI构建和项目打包的攻略：

Vue CLI构建教程

1. 安装Vue CLI

首先，需要安装Vue CLI。在命令行工具中执行以下命令即可：

npm install -g @vue/cli

安装完成后，可以执行以下命令来确认是否安装成功：

vue --version

2. 创建Vue项目

使用Vue CLI创建一个新项目，需要进入项目要存储的文件夹，执行以下命令：

vue create my-project

其中my-project为你自己的项目名称，命令执行完后会在该文件夹下创建一个新的Vue项目。

3. 启动Vue项目

进入Vue项目的根目录（即刚刚创建的my-project文件夹），执行以下命令：

npm run serve

该命令会启动一个开发服务器，可以在浏览器中访问http://localhost:8080/来查看项目的运行效果。

4. 编写Vue代码

在项目根目录下的src文件夹中可以找到Vue项目的源代码文件。在该文件夹下找到App.vue文件，这是一个空白的Vue组件文件。

下面是一个简单的例子，用来演示Vue的基础用法：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Welcome to Vue!'
    }
  }
}
</script>

这个组件定义了一个文本域，显示一个消息“Hello Vue!”和一个按钮，点击按钮将改变该消息为“Welcome to Vue!”。

5. 构建Vue项目

在开发阶段中，使用npm run serve启动的服务器其实并没有将开发代码打包为最终的产品。在正式部署之前需要构建Vue项目。

执行以下命令即可构建项目：

npm run build

该命令会在项目根目录下创建一个dist文件夹，并将打包好的文件存储在其中。

Vue项目打包教程

1. 安装http-server

要在本地网络中查看打包后的Vue项目，需要启动一个静态HTTP服务器。可以使用node.js中的http-server来启动一个简单的HTTP服务器。执行以下命令即可安装：

npm install -g http-server

2. 启动http-server

在打包完成后，进入dist文件夹下，执行以下命令来启动http-server：

http-server -p 8000

该命令会启动一个静态服务器，并在本地网络的8000端口上提供服务。现在可以访问http://localhost:8000来查看打包后的Vue项目。

至此，Vue cli构建及项目打包的过程就完成了。在实际操作中可能会遇到一些问题，下面提供两个示例进行具体讲解。

问题解决

问题1：打包后的Vue项目在IE浏览器中无法正确运行

解决步骤：

安装@vue/cli-plugin-babel插件：

npm install --save-dev @vue/cli-plugin-babel

在vue.config.js文件（若无，需手动创建）中进行如下配置：

js module.exports = { transpileDependencies: ['@vue'], configureWebpack: { output: { libraryExport: 'default', }, }, chainWebpack: config => { config.module .rule('babel') .use('babel-loader') .tap(options => { options.presets = [ [ '@babel/preset-env', { useBuiltIns: 'usage', corejs: 3, targets: { ie: '11', }, }, ], ]; return options; }); }, };

重新运行npm run build构建项目，再次在IE浏览器中尝试访问。

问题2：构建过程中报错"Error: spawn EAGAIN"