vue让你理解npm run dev 和 npm run serve的区别

npm run dev 是vue-cli2.0版本使用的 npm run serve 是vue-cli3.0版本使用的

dev build serve? 在我们运行一些 vue 项目的时候，输入npm run serve或者 npm run dev的其中一个时，系统会报错，然后我们就特别好奇，npm run serve 和 npm run dev 到底有什么区别。

其实 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写。 npm run XXX是执行配置在 package.json 中的脚本，比如：

vue-cli2.0：

  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
}

vue-cli3.0：

    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
	"lint": "vue-cli-service lint"
}

可以把这个 npm run serve 当做是 npm run package.json 里面的scripts的value。比如，npm run serve 实际运行的是 vue-cli-service serve；而如果你想使用npm run dev 的话，只需把 “serve” 修改为 “dev” 就行。

npm run xxx 中的 xxx 可以理解为键值对的 key，实际上 run 的是在 package.json 里面 scripts 配置的 value；

比如，npm run serve 实际运行的是 vue-cli-service serve；

而放在 3.0 以前运行的则是 node build/dev-server.js 文件；

问题：

有些项目使用vue-cli3.0新建的，在根目录下并没有build文件夹，这个时候如果我们要修改打包配置就很麻烦，因为没有配置文件。比如我们假设这样一个情景，我们想www.xxx.com/wap二级目录来访问我们的页面。

然后，在没有做任何配置下，打包的文件扔到服务器ngix根目录下wap文件下；启动ngix打开www.xxx.com/wap 肯定就是空白或404；

解决办法：

如果你用的是vue-cli2.0，那就非常简单，可以直接在build文件夹下，修改webpack.base.conf.js配置打包目录； 1.但如果你用的是vue-cli3.0，在没有build文件夹的情况下，我们需要在项目根目录新建vue.config.js，加入代码如下：

module.exports = {
  publicPath:"./"
}

注意: baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath；

2.修改路由：vue-router 的两种前端基本访问模式 hash 和history 。hash 模式后面带#，打包的时候只需要把绝对路径(/)换成相对对路径(./)，就可以部署在任何地方，不需要服务器配合。在这里使用hash模式：

export default new VueRouter({
   mode:"hash",
   base:'./'
})

3.在入口文件中index.html 的head 标签内加入 4.如果是history模式需要改成文件夹名： publicPath:"/wap" base:"/wap" 还需修改nginx配置配合如下代码：

server {
	listen 80;
	server_name localhost;
	root /home/wwwroot/;
	location /wap {
		try_files $uri $uri/ /web/index.html;
	}
}

到此，配置和部署已经完成了，将打包好的前端静态资源放在域名指定的根目录下的二级(多级目录配置同上)录即可，注意，以上配置是针对在history模式，部署在域名下的二级目录以上的配置，hash 模式和 history 模式部署在域名根目录不需要那么多配置。

总结：

npm run xxx，并不是你想运行就运行的，只有在 package.json scripts 配置了，你才能 run 的，所以不是所有的项目都能 npm run dev/build。

要了解这些命令做了什么，就要去scripts中看具体执行的是什么代码。

这里就像是一些命令的快捷方式，免去每次都要输入很长的的命令（比如 serve 那行）

一般项目都会有 build, dev, unit 等，所以起名，最起码要从名字上基本能看出来是干什么的。