vue-cli项目的运行和打包

运行项目

vue-cli项目的运行，不是简单在浏览器中打开你写的代码。项目运行，需要经过下面的步骤： 1. 项目代码会通过webpack打包工具进行打包，形成可运行的文件，放在一个临时目录当中。 2. 启动内置的服务器，加载临时目录，作为网站的目录。

控制台中直接运行项目

将控制台定位到需要启动的项目目录下

npm run serve

这时候，npm包管理工具会自动去查找package.json文件中，scripts属性中定义的代码

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

回去调用serve对应的命令代码vue-cli-service serve

但是我们直接将该命令在控制台执行，会报错。

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

我们需要在命令前加一个npx，然后再执行，这样才能调用npm安装的包中的命令。

npx vue-cli-service serve

停止 Ctrl+C

可视化界面去启动项目

vue ui

项目管理器进入到要启动的项目，选择任务-serve-运行。等待项目启动后点击"打开app"。

停止：点击停止，可停止项目。要关闭gui，Ctrl+C

热更新

在我们开发项目的过程当中,通过serve命令要运行起来的开发环境的服务器，是使用热更新机制的。代码分段进行打包，然后我们在项目中改动东西的时候，只有因为改动需要重新编译的部分，才会进行编译，从而大大的节省编译时间。并且编译完毕后，会通知浏览器加载新的内容。

热更新只能处理js脚本、视图、资源文件。但是涉及到项目的配置修改的情况，那热更新是无效的，需要重新启动项目。

打包

npm run build

也可以在图形化界面进行打包。

打包后在项目的dist文件下的，就是打包出来的项目文件。可以直接放到服务器上进行使用。