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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享

CentOS+Nginx+Tomcat搭建高性能负载均衡集群

[html] view plain copy

4627
来自专栏Java后端生活

Linux(九)实用指令

1973
来自专栏Java帮帮-微信公众号-技术文章全总结

Linux命令(面试+工作版)

Linux命令(面试+工作版) ? ? ? ? ? ? ? 1. tar 创建一个新的tar文件 ? 解压tar文件 ? 查看tar文件 ? 2. grep 在...

4864
来自专栏分享达人秀

JDK的正确安装和配置

JDK的全称是Java Development Kit,翻译成中文就是Java开发工具包,主要包括Java运行环境、一些Java命令工具和Java基础的...

2336
来自专栏Android干货

Android项目实战(十二):解决OOM的一种偷懒又有效的办法

2685
来自专栏Laoqi's Linux运维专列

Linux日常运维小结

1. 如何看当前Linux系统有几颗物理CPU和每颗CPU的核数? 物理cpu个数:cat /proc/cpuinfo |grep -c ‘physical ...

78913
来自专栏Java技术分享

CentOS+Nginx+Tomcat搭建高性能负载均衡集群

1、环境 CentOS6.5 JDK1.7 Nginx1.7.4 2、环境准备 先安装必须的工具 yum -y install gcc gcc-c++ auto...

6069
来自专栏云计算教程系列

如何在Debian 8上安装Go

Go,也称为golang,是由Google开发的一种现代开源编程语言。Go在许多应用程序中越来越受欢迎,它采用极简主义的开发方法,帮助您构建可靠,高效的软件。

1532
来自专栏向治洪

android Native堆

Android 应用开发大家都知道可以通过DDMS来查看应用程序进程占用的内存大小;然而Native 内存并不能在虚拟堆上看到;Android系统基于Li...

2286
来自专栏无所事事者爱嘲笑

vscode eslint配置vue遇到的问题

3742

扫码关注云+社区

领取腾讯云代金券