24.Vue-cli的打包部署

24.1.Vue-cli工程为什么要打包部署

我们所完成的工程，最终都是要部署到服务器（Tomcat、Nginx等等）上运行的。但是，服务器是不可能识别vue文件的，因为vue文件只是Vue-cli工程中的一种自定义文件。

所以，我们需要将vue文件中的html代码、css代码、js代码抽取出来，重新打包成真正的html文件、css、文件和js文件，然后才能部署到服务器上。

24.2.Vue-cli工程打包配置

在vue.config.js文件中添加如下配置：

module.exports = {
    //打包基本目录
    publicPath:'./',
    //输出目录
    outputDir:'dist',
    //静态资源目录
    assetsDir:'assets',

    ... ...
}

在命令行中进入到工程目录，运行如下命令：

npm run build

在工程目录中，就会出现 "dist" 目录，这就是打包好的工程

注意：打包工程必须要放在一个 HTTP 服务器中才能运行。