2月10日-vue-cli(3-1). 项目的运行和打包

Profile Picture
Published on Feb 10, 2020🌏 Public

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文件下的,就是打包出来的项目文件。可以直接放到服务器上进行使用。