VueJs生产环境部署
VueJs为客户端语言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他静态站点的方式发布就可以了,下面介绍一下VueJs具体发布的流程还有需要注意的点。
先来看VueJs最终生成的文件目录:

具体的步骤如下:
1.vue项目根目录/config/index.js更改资源生成路径:
assetsPublicPath:"/项目名/"改为assetsPublicPath:"/"
解决问题:index.html资源访问不到,资源多一级项目名称的路径。
2.使用 npm run build 命令生成站点,站点为根目录下的dist文件;
3.解决站点刷新时404的问题;
到这个步骤的时候站点已经能正常访问了,到时不能F5刷新,刷新的时候回报404,仔细观察命令会发现,路径已经变成咱们vue路由里面设置的“虚路径”了,所以肯定会404,这个时候需要在运行服务器上进行设置,把访问不到的路径都指向index.html,这个时候站点就支出刷新了,比如我如果是使用nginx做代理,配置:
location / {
try_files $uri $uri/ /index.html;
}
更多的服务器配置点击:https://github.com/vuejs/vue-router/blob/dev/docs/zh-cn/essentials/history-mode.md
VueJs生产环境部署的更多相关文章
- Django + Uwsgi + Nginx 的生产环境部署
使用runserver可以使我们的django项目很便捷的在本地运行起来,但这只能在局域网内访问,如果在生产环境部署django,就要多考虑一些问题了.比如静态文件处理,安全,效率等等,本篇文章总结归 ...
- Centos7 HyperLedger Fabric 1.4 生产环境部署
Kafka生产环境部署案例采用三个排序(orderer)服务.四个kafka.三个zookeeper和四个节点(peer)组成,共准备八台服务器,每台服务器对应的服务如下所示: kafka案例网络拓扑 ...
- 深度学习Tensorflow生产环境部署(上·环境准备篇)
最近在研究Tensorflow Serving生产环境部署,尤其是在做服务器GPU环境部署时,遇到了不少坑.特意总结一下,当做前车之鉴. 1 系统背景 系统是ubuntu16.04 ubuntu@ub ...
- Spring Boot (二)集成Jsp与生产环境部署
一.简介 提起Java不得不说的一个开发场景就是Web开发,也是Java最热门的开发场景之一,说到Web开发绕不开的一个技术就是JSP,因为目前市面上仍有很多的公司在使用JSP,所以本文就来介绍一下S ...
- Vue生产环境部署
前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue ...
- 【原创】大数据基础之Airflow(2)生产环境部署airflow研究
一 官方 airflow官方分布式部署结构图 airflow进程 webserver scheduler flower(非必须) worker airflow缺点 scheduler单点 通过在sch ...
- 第四百零二节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署,uwsgi安装和启动,nginx的安装与启动,uwsgi与nginx的配置文件+虚拟主机配置
第四百零二节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署,uwsgi安装和启动,nginx的安装与启动,uwsgi与nginx的配置文件+虚拟主机配置 软件版本 uwsgi- ...
- 第四百零一节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署virtualenv虚拟环境安装,与Python虚拟环境批量安装模块
第四百零一节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署virtualenv虚拟环境安装,与Python虚拟环境批量安装模块 virtualenv简介 1.安装virtuale ...
- 第四百节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装python3.5.1
第四百节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装python3.5.1 1.检查系统是否安装了python [root@192 ~]# rpm -qa ...
随机推荐
- 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图
标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...
- 浅谈css中单位px和em,rem的区别-转载
px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div ...
- kindeditor修改图片上传路径-使用webapi上传图片到图片服务器
kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...
- ios 视频/图片压缩
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
- 接口调用 GET方式
/** * 第一步 视图展示 . 视图页面(忽略) * @return [type] [description] */ /** * 第二步 控制器先将要运行的接口处理好(接口及参数)传到到Model层 ...
- C++学习笔记1(标准的输入输出)
前言: 个人一直以来比较懒,最近才准备记录一下自己学习C++的学习过程,希望自己能在写博客的时候能够坚持下去,欢迎大家在博客中支出存在的问题,好了不多说了,自己能坚持下去.我准备在我的博客中通过与C语 ...
- python——模块
一.导入模块 Python之所以应用越来越广泛,在一定程度上也依赖于其为程序员提供了大量的模块以供使用,如果想要使用模块,则需要导入.导入模块有一下几种方法: 1 import module 2 fr ...
- JS模式---命令模式
var opendoor = { execute: function () { console.log("开门"); } }; var closedoor = { execute: ...
- Angular2快速起步——构建一个简单的应用
构建此应用,分为如下几步: 1.环境准备:安装Node.js和npm: 2.创建并配置此项目: 3.创建应用: 4.创建组件并添加到应用程序中: 5.启动应用程序: 6.定义作为该应用的宿主页面: 7 ...
- 学好php可以做的事情真多!
学好php能做什么?其实学好php能做的事情很多! 一. 学好php可以就业 1:大中小公司通吃. 现在几乎所有有前途的公司都会在互联网上安家.只要在网上安家,就需要找这些方面的技术人员,而且很多公司 ...