简要:继上次搭建vue环境后,开始着手vue的学习;为此向你们分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,但愿可以跟各位VUE大神学习探索,若是有不对或者好的建议告知下;*~*!php
1、如何打包,部署到生产环境(线上)css
npm run build
1. dist 文件结构(编译后,生成在vue目录下)html
- static (存放css/js/image)
- index.html (编译后页面)
2. 部署生产环境(以Thinkphp为例)vue
(1) 创建子项目,建立控制器创建index方法;实例化模板;将编译后index.html存放在对应的视图下;npm
(2) 修改vue配置文件(dist下status文件,默认存放在项目的根目录;若无须改变请忽略此步骤!) 框架
(index.html 文件目录)学习
(config文件static存在路径修改,配置文件路径:config\index.js)ui
2、不加载组件(非根目录)url
缘由:路由path错误spa
(路由配置图)
3、刷新页面(刷新路由)出现404
1. 为何
vue路由设置 HTML5 History 模式,直接访问/刷新url会被http server直接解析到该文件路径(被相应的框架接管),但vue的路由是虚拟的(只是告知编译后index.html文件追寻到相应的路径),并不能直接找到这个file,因此会404;
2. 怎么作(针对nignx;具体参考:HTML5 History 模式)
location / {
root (index.html存在目录路径,好比:/admin/tpl/index/)
try_files $uri $uri/ /index.html;
}
单配置此步骤,任意不存在页面(404)都会跳转到上述指定路径;详细解决办法请看下文;
4、任意不存在页面(404)都跳转到指定路径(针对解决404页面后)
我的解决方法:制做404页面的组件;
在routes.js配置,配置增长一下路由
{ path: '*', component: defaults }
以上就是个人分享,若是个人这篇文章解决了你的问题,麻烦你点个赞让更多一样状况的朋友,能更快的解决问题!