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

时间: 2024-10-12 00:47:17

VueJs生产环境部署的相关文章

生产环境部署squid服务

网络拓扑 该实验使用虚拟机模拟搭建,准备开启2台虚拟机,客户端用本记代替. 1.Squid服务器使用2块网卡.如下图显示: 2.Web服务器与squid服务器配置在同一个网段即可.如下图显示: 3.客户端IP与squid服务器网卡1是在同一网段上即可.如下图显示: 4.查看squid服务器上的eth0和eth1网卡ip地址 5.查看web服务器的ip地址 6.先测试客户端能否ping通squid服务器的网卡1. 7.测试客户端能否ping通web服务器,ping不通正常. 8.安装squid软件

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

使用runserver可以使我们的django项目很便捷的在本地运行起来,但这只能在局域网内访问,如果在生产环境部署django,就要多考虑一些问题了.比如静态文件处理,安全,效率等等,本篇文章总结归纳了一下基于uwsgi+Nginx下django项目生产环境的部署 准备条件: 1.确保有一个能够用runserver正常启动的django项目 2.项目已上传到linux 3.linux上已部署好python环境,且已安装好项目所需的模块 安装uwsgi uwsgi是python的一个模块,安装u

奉上SCCM生产环境部署Error Logs

奉上SCCM生产环境部署Error Logs SCCM生产环境部署报错日志,供大家查看,如有此类问题,可共同探讨,附件为日志查看器及相关日志.

生产环境部署容器的五大挑战及应对之策

Docker容器使应用程序开发变得更容易,但在生产中部署容器可能会很难. 环境复杂性.生态系统易变性.跨不同分布式基础架构的部署...... 本文将为你解析生产环境部署容器的五大挑战及应对之策. 软件开发人员通常只关注在特定基础架构上运行的单个应用程序.应用程序堆栈或工作负载.然而,在生产环境中,一组不同的应用程序常需在各种技术(例如Java,LAMP等)上运行,而这些技术又需在本地.云上或二者结合的异构基础设施上部署.这给生产环境中容器化应用程序的运行带来了一些挑战: 控制高度密集.快速变化的

Vue生产环境部署

前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue生产环境部署 生产环境 如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue),生产时应该用精简版本 (vue.min.js) 如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定,

生产环境部署单台redis

生产环境部署redis方案1.腾讯云有redis主从2.自己部署redis也很简单 (1)redis使用编译安装方式,所以需要安装编译基本组件# yum install gcc cpp glibc glibc-devel gcc-c++ (2)redis依赖jemalloc,所以先安装此组件# wget http://www.canonware.com/download/jemalloc/jemalloc-4.2.1.tar.bz2后续读者可以查看此链接获取更新版本jemalloc,http:/

HyperLedger Fabric 1.2 kafka生产环境部署(11.1)

11.1 Kafka模式简介       上一章介绍的Solo模式只存在一个排序(orderer)服务,是一种中心化结构,一旦排序(orderer)服务出现了问题,整个区块链网络将会崩溃,为了能在正式环境中稳定运行,需要对排序(orderer)服务采用集群方式,Hyperledger Fabric采用kafka方式实现排序(orderer)服务的集群,kafka模块被认为是半中心化结构.       顺便提一下,去中心化的BFT(拜占庭容错)排序(orderer)服务集群方式目前还在开发,还没有

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

一 官方 airflow官方分布式部署结构图 airflow进程 webserver scheduler flower(非必须) worker airflow缺点 scheduler单点 通过在scheduler的dags目录变动dag文件来提交流程 官方分布式部署方案 多个webserver 多个worker CeleryExecutor(依赖redis或rabbitmq) MesosExecutor(依赖mesos) 第三方开源方案ASFC 针对scheduler单点问题,有第三方方案:ht

一种简单的生产环境部署Node.js程序方法

最近在部署Node.js程序时,写了段简单的脚本,发觉还挺简单的,忍不住想与大家分享. 配置文件 首先,本地测试环境和生产环境的数据库连接这些配置信息是不一样的,需要将其分开为两个文件存储 到config目录下,比如: 开发环境配置文件config/development.js: module.exports = { port: 3001, mysql: { user: 'root' } }; 生产环境配置文件config/production.js: module.exports = { po