VueJs生产环境部署

简介:   VueJs为客户端语言,所以部署的时候是不需要基于nodejs或其他服务器运行环境,只需要像其他静态站点的方式发布就可以了,下面介绍一下VueJs具体发布的流程还有需要注意的点。   先来看VueJs最终生成的文件目录:         具体的步骤如下:   1.vue项目根目录/config/index.js更改资源生成路径:     assetsPublicPath:"/项目名/"改为assetsPublicPath:"/"     解决问题:index.html资源访问不到,资源多一级项目名称的路径。

  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

 

img_fa0be433d68c8212b2b0b3b1a564ccb1.png
如果本文对你有所帮助,请打赏——1元就足够感动我:)
支付宝打赏 微信打赏
联系邮箱:intdb@qq.com
我的GitHub: https://github.com/vipstone
关注公众号: img_9bde0f31ac4a0eca10b1bd7414b78faf.png


作者: 王磊
出处: http://vipstone.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,请标明出处。

相关文章
|
9月前
|
中间件 API
nuxt3:我们开始吧-开发-配置-部署(二)
nuxt3:我们开始吧-开发-配置-部署(二)
358 0
|
9月前
|
JavaScript 中间件 API
nuxt3:我们开始吧-开发-配置-部署(一)
nuxt3:我们开始吧-开发-配置-部署(一)
686 0
|
9月前
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
638 0
|
7天前
|
缓存 监控 JavaScript
环境搭建:Vue项目的开发环境和生产环境配置
【4月更文挑战第23天】本文指导Vue开发者配置开发和生产环境,强调了两者目的和特点。开发环境用于编写、测试和调试,侧重快速反馈和调试工具;生产环境注重稳定性、效率和安全性,需进行代码优化、错误处理和日志监控。配置步骤包括安装Node.js和npm,使用Vue CLI,配置Webpack、热重载和源码映射。生产环境要实现代码分割、压缩、最小化,启用CSP、HTTPS,优化静态资源和缓存策略。环境配置应随项目发展和技术进步持续优化。
|
5月前
|
资源调度 JavaScript 测试技术
Vue脚手架一站式搭建项目
Vue脚手架一站式搭建项目
64 0
Vue脚手架一站式搭建项目
|
10月前
|
JavaScript 前端开发 开发工具
从0搭建Vue3组件库:使用gulp自动化处理打包与发布
从0搭建Vue3组件库:使用gulp自动化处理打包与发布
311 0
|
10月前
|
存储 前端开发 JavaScript
SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程(原始部署/宝塔部署)
SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程(原始部署/宝塔部署)
1727 2
SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程(原始部署/宝塔部署)
|
11月前
|
Web App开发 前端开发 JavaScript
react+electron从环境搭建到项目整合全过程
react+electron从环境搭建到项目整合全过程记录
433 1
|
缓存 前端开发
umi项目升级那些事
本文适合对前端新技术、技术框架升级感兴趣的小伙伴阅读。
umi项目升级那些事
|
应用服务中间件 Linux Serverless
搭建Vue3组件库:第十四章 使用Vercel部署在线文档
介绍如何使用Vercel来部署我们的在线文档
406 0
搭建Vue3组件库:第十四章 使用Vercel部署在线文档

热门文章

最新文章