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生产环境部署的更多相关文章

  1. Django + Uwsgi + Nginx 的生产环境部署

    使用runserver可以使我们的django项目很便捷的在本地运行起来,但这只能在局域网内访问,如果在生产环境部署django,就要多考虑一些问题了.比如静态文件处理,安全,效率等等,本篇文章总结归 ...

  2. Centos7 HyperLedger Fabric 1.4 生产环境部署

    Kafka生产环境部署案例采用三个排序(orderer)服务.四个kafka.三个zookeeper和四个节点(peer)组成,共准备八台服务器,每台服务器对应的服务如下所示: kafka案例网络拓扑 ...

  3. 深度学习Tensorflow生产环境部署(上·环境准备篇)

    最近在研究Tensorflow Serving生产环境部署,尤其是在做服务器GPU环境部署时,遇到了不少坑.特意总结一下,当做前车之鉴. 1 系统背景 系统是ubuntu16.04 ubuntu@ub ...

  4. Spring Boot (二)集成Jsp与生产环境部署

    一.简介 提起Java不得不说的一个开发场景就是Web开发,也是Java最热门的开发场景之一,说到Web开发绕不开的一个技术就是JSP,因为目前市面上仍有很多的公司在使用JSP,所以本文就来介绍一下S ...

  5. Vue生产环境部署

    前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue ...

  6. 【原创】大数据基础之Airflow(2)生产环境部署airflow研究

    一 官方 airflow官方分布式部署结构图 airflow进程 webserver scheduler flower(非必须) worker airflow缺点 scheduler单点 通过在sch ...

  7. 第四百零二节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署,uwsgi安装和启动,nginx的安装与启动,uwsgi与nginx的配置文件+虚拟主机配置

    第四百零二节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署,uwsgi安装和启动,nginx的安装与启动,uwsgi与nginx的配置文件+虚拟主机配置 软件版本  uwsgi- ...

  8. 第四百零一节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署virtualenv虚拟环境安装,与Python虚拟环境批量安装模块

    第四百零一节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署virtualenv虚拟环境安装,与Python虚拟环境批量安装模块 virtualenv简介 1.安装virtuale ...

  9. 第四百节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装python3.5.1

    第四百节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装python3.5.1 1.检查系统是否安装了python [root@192 ~]# rpm -qa ...

随机推荐

  1. Windows下JIRA6.3.6安装、汉化、破解

    一.MySQL建库和建账号 1. mysql中创建数据库jiradb create database jiradb character set 'UTF8'; 2.创建数据库用户并赋于权限 creat ...

  2. 关于DCL的使用

    DCL1 创建用户语法:CREATE USER 用户名@地址 IDENTIFIED BY '密码';CREATE USER user1@localhost IDENTIFIED BY '123'; C ...

  3. 前端随手优化不完全篇-SEO篇

    一代码优化概述 关于代码优化的知识是纯理论的知识,学习的很枯燥.在学到CSS时,不免遇到CSS+div进行代码优化的知 识,因此在网上看了一些关于这方面的知识,简单的整合一下,梳理自己所了解的代码优化 ...

  4. CF #93 div1 B. Password KMP/Z

    题目链接:http://codeforces.com/problemset/problem/126/B 大意:给一个字符串,问最长的既是前缀又是后缀又是中缀(这里指在内部出现)的子串. 我自己的做法是 ...

  5. 【代码学习】PHP文件的上传和下载

    ===================== 文件上传和下载 ===================== 一.php.ini的配置信息 file_uploads = On /Off    是否允许文件上 ...

  6. 导出Mysql数据库中的数据

    使用mysqldump 指令: D:\>mysqldump -u root -proot bookStore>bookStore.sql

  7. 天方夜谈·数据结构·List

    在战场上杀不死的敌人,永远也别想打败他,他就像幽灵横亘在你失败的田地上. 大一下学期,接触到Java程序设计语言,时至今日,才越发觉得知识与技术的海洋是多么多么的浩瀚.......如果说编程语言的一个 ...

  8. [KISSY5系列]KISSY5安装使用(一)

    本文将从零开始安装KISSY环境 一.安装nodejs 从nodejs网站下载nodejs安装 地址: https://nodejs.org/en/download/ 二.下载KISSY 下载地址:  ...

  9. 32位机器的LowMemory

        今天在和供应商交流的过程中,被严重鄙视了,竟然认为我连"LowMemory"都没有听说过.感觉很郁闷,好歹我也搞过一段时间memory Management,怎么可能连Lo ...

  10. PHP count() 函数

    count() 函数计算数组中的单元数目或对象中的属性个数. 对于数组,返回其元素的个数,对于其他值,返回 1.如果参数是变量而变量没有定义,则返回 0.如果 mode 被设置为 COUNT_RECU ...