一、打包的命令
相信同学们对于打包vue-cli项目都不陌生了，简单的执行下面这条语句就行了：
npm run build
看看我们的 package.json 文件，它的 scripts 里有这么一句
"build": "node build/build.js"
因此，我们可以执行上面的那条命令进行打包，常用的 npm run dev 等等也是同理
本地打包就这样非常轻松的完成了
注意，有几个可能你不知道的坑在等着你！！！
二、Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.
看到控制台给出了这样的提示，，很多同学慌了：是不是我打包失败了？
别紧脏，控制台告诉我们只能够在http服务器下访问我们的index.html，而不能从本地文件中打开，并没有提示我们打包失败！
想要本地访问我们的项目，只需要在本地启一个测试服务器就好啦，这里推荐一个好用的软件：xampp ，不多介绍，同学们自行查阅安装。
后台同学已经配好了Jenkins自动构建，我们不需要在本地打包，跳过这一步，直接把源码上传到我们的代码仓库（gitlab）中，等待服务器构建完毕，就能访问啦！
具体的配置等服务端同学的帖子发了，我再贴给大家！
二、去除路由中的 #
我们本地环境开发的时候，默认的访问地址：
localhost:8080/#/路由
访问后台同学配置好的域名，看看我们的地址栏：
服务端配置的地址/#/路由
想想百度之类的网站，哪有这个，啥玩意，丑！！
下面我们去掉它
看我们项目目录里 config 文件夹下的 index.js 文件
里面 module.export 的有两个配置：dev 和 build，分别代表开发环境和生产环境，我们看生产环境
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // index.html
// Paths
assetsRoot: path.resolve(__dirname, '../dist'), // 打包输出目录
assetsSubDirectory:'static', // 静态资源目录
assetsPublicPath:'./',
这几句决定了我们的打包路径
首先我们把 assetsPublicPath 改成绝对路径 ‘/’
再看 src/router/index.js 这个文件，也就是我们常用的路由配置文件
添加这样一句：
mode:'history',
将路由模式改为history，具体介绍看 官方文档 ，这里不多讲。
网上还有说法，需要在这里添加 base 配置，否则会导致嵌套路由失效，我没加，啥问题也没有，暂时不管。
好了，前端能做的就只有这么多了，剩下的都是服务端同学的工作了
什么，不服气？你只是个前端，就算你技术再好......咳咳，扯远了
三、刷新页面显示404错误
页面刷新后报404错误，原因其实也很简单
vue是个单页应用，它的路由是模拟的url，并没有在服务器上真实存在，当然访问不到
举个栗子🌰
我们的网址是：www.xxx.com，后端同学会把服务器上的 index.html 映射到这个网址上
然而，当我们访问登录页，在地址栏输入 www.xxx.com/login 的时候，服务器蒙了，臣妾做不到啊！哪有这个东西，不得已，只好给个404给你
官网推荐nginx服务器添加如下配置：
location / {
try_files $uri $uri/ /index.html;
}
意思就是在访问所有请求不到的资源地址的时候，返回我们的index.html
不知道你们成功没有，反正我们这么搞没成功，但据说也差不多，具体的配置以后再发！！！
所以如果有问题，去麻烦你的后端同学吧，纯前端真的只能做到二里面的两步，555......
四、静态资源路径错误
这个问题网上的解决方案有很多，我也试过很多，有的行有的不行，这里简单给个终级解决方案：
图片：就上传到静态服务器上，别管相对路径绝对路径的，这样最稳，我们用的是 阿里云OSS
当然，如果你的页面运行在https而文件路径是http，页面上会有不少警告
js文件：一般都分布在各个组件里，个人习惯把公共js文件放在 /src/common/js/ 目录下，你也可以放在 /src/assets/js/ 目录下
第三方插件的js：一定要放在 static 文件夹里，他和assets的区别，简单来说，就在于：static文件夹不会进行二次打包
然后在index.js里引用这个文件，当然，能用npm安装，尽量还是npm吧
样式文件，请看我的另一篇文章：vue-cli项目如何使用sass？
这样做，上线后的资源路径，基本不会有问题
五、Uncaught SyntaxError: Unexpected token <
最开始，遇到这个问题，我是一脸懵逼的
别晃，冷静，我们看控制台，报错地址是我用的第三方插件
说到底，还是资源路径有问题
出现这个问题，我们的index.html应该是这么写的：
<script src="./static/js文件名"></script>
想想我们第二步最开始做了什么？生产环境下，我们的路径已经修改为绝对路径
那么做相应的修改，把那个点号去掉
<script src="/static/js文件名"></script>
修改成功，看看控制台，不再报错了。
六、结语
本来开发开开心心的心情，怎么一到打包就不行了捏，打包这件事儿，肯定还有许多我也没遇到的坑，所以这篇文章也会不定期更新。
希望这篇文章能够帮助同学们成功爬坑，如果对您有所帮助，请关注、点赞并收藏，有其他问题也可以留言或私信，欢迎讨论！
网友评论