Vue 生产环境部署

Vue2.0 生产环境部署

简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下;~


一、如何打包,部署到生产环境(线上)

npm run build

1. dist 文件结构(编译后,生成在vue目录下)

  • static (存放css/js/image)
  • index.html (编译后页面)

2. 部署生产环境(以Thinkphp为例)

(1) 建立子项目,创建控制器建立index方法;实例化模板;将编译后index.html存放在对应的视图下;

(2) 修改vue配置文件(dist下status文件,默认存放在项目的根目录;若无须改变请忽略此步骤!)  

(index.html 文件目录)

(config文件static存在路径修改,配置文件路径:config\index.js)
 

二、不加载组件(非根目录)

原因:路由path错误 
(路由配置图)

三、刷新页面(刷新路由)出现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)都会跳转到上述指定路径;详细解决办法请看下文;

四、任意不存在页面(404)都跳转到指定路径(针对解决404页面后)

这里写图片描述
个人解决方法:制作404页面的组件;在routes.js配置,配置增加路由

{ path: '*', component: defaults }

作者:不动峰
出处:http://www.jianshu.com/users/c0abc9c5f51e/latest_articles
博客园:http://www.cnblogs.com/mylly/
备注:现承接企业大型网站与接口开发,有意向的朋友请联系(QQ:857280707)
版权所有,欢迎保留原文链接进行转载:)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章