这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
前言
今天发现很多一两年工作经验的小伙伴还不会打包vue，而且并不知道打包的命令！真的大无语，更不用说部署到服务器放到nginx目录下这一系列操作了，下面我们来看看吧~
一、vue的运行命令区别
npm run dev 和npm run serve的区别你知道吗？
1、npm run dev
2、npm run serve
看出来了嘛，我们通过package.json文件就能看出scripts的key，第一个npm run dev的key是“dev”，第二个是"serve"所以导致我们运行的命令不同，但是为什么命令会不同呢？这和vue脚手架有关，导致这里的配置不同。
3、脚手架
（1）Vue这个就是我们常说的渐进式框架，但是这个是完整的一整个框架。
（2）Vue Cli这个是基于vue进行快速工程化的一套命令行工具，由vue整体核心构成
有了这个区别，才有两种运行命令方式。
二、vue打包
1、静态文件打包后放到服务器报错
这个是很常见的一个问题了，基本上每开发一个项目都要配置一次，还会出现问题。
vue项目：在config/index.js中配置：
主要配置assetsPublicPath:‘./’
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
vue cli项目：在vue.config.js中配置：
module.exports = { publicPath: './', outputDir: "dist", // 输出文件目录 assetsDir: 'static', // 配置js、css静态资源二级目录的位置 };
这个主要是配置publicPath：‘./’
2、打包后只有背景图，没有任何页面内容，控制台也不报错
这个不知道大家是否遇到过，这个很简单，就是因为配置了路由模式是history，去掉这个或者改成hash就好了！
如果必须用history，也有解决办法，在mode上面加一个base:'/demo/'（这个demo是工程名字）
router/index.js
const router = new Router({ mode: "history", base: "demo", routes: [ { path: "/", name: "index", component: index, } ],});
vue.config.js
module.exports = {
publicPath: '/demo/',
outputDir: 'dist',}
nginx（demo也是项目名）:
location /demo {
index index.html index.htm;
try_files $uri $uri/ /demo /;
}
先写这么多，今天有点忙，写的不太具体后面有时间再完善一下，我下班啦~
