当前位置: 首页 > news >正文

宝塔面板安装部署Vue项目,Vue项目从打包到上线

前期准备

1.宝塔面板已经成功安装到服务器
2.vue项目已经成功开发完成

开始

在这里插入图片描述
在宝塔面板中选择PHP项目添加站点,站点PHP版本设置为纯静态,输入域名或者IP
在这里插入图片描述
这是后你会获得一个网站文件目录
在这里插入图片描述
点击根目录进入目录后,若你的Vue项目么有打包好需要进行 npm run build 命令进行打包处理,但在打包前需要进行设置,首先查看自己的router设置是否为history模式

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

mode需为history模式,其次查看自己的vue.config.js中是否设定了访问路径正确,我这里直接使用的是vue2.x所以需要增加一行

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true
  })

增加这个保证访问的是根目录

  publicPath: './',

保证上面设置就可以进行打包。打包后会发现你的项目下出现一个dist的文件目录这个就是打包好的文件只需要把这个文件夹上传到你创建网站的宝塔根目录中,并且在网站设置中设置访问路径是你的dist文件夹
在这里插入图片描述
因为vue是单文件应用还需要再伪静态中设置使用js控制网站的跳转,如果不进行设置的话,你会发现除了首页以外其他页面访问都是404找不到页面

location / {
  if (!-e $request_filename) {
    rewrite  ^(.*)$ /index.html?s=/$1  last;
    break;
  }
}

在这里插入图片描述
设置完成后就可以访问你的vue项目了

相关文章:

  • 天蝎网络服务公司/便宜的seo网络营销推广
  • 垂直网站建设方案书/网络营销模式有哪些?
  • 免费小程序开发报价/seo运营推广
  • 企业网络推广方式/免费seo网站自动推广软件
  • 怎么做网站评估/网站制作公司
  • 建设行政主管部门官方网站/本网站三天换一次域名
  • 《MLB棒球创造营》:走近棒球运动·迈阿密马林鱼队
  • 【设计模式】行为型模式-第 3 章第 3 讲【解释器模式】
  • 【云原生之Docker实战】使用Docker部署pdf2htmlEX文件转换工具
  • Observability:集群监控 (一) - Elastic Stack 8.x
  • 【maven】什么是坐标(依赖)继承与模块、web项目启动访问
  • Solidity 基础知识
  • CDH大数据平台 18Cloudera Manager Console之Sentry权限kafka测试(markdown新版)
  • 【ROS】如何在ROS中使用anaconda虚拟环境?
  • 什么是 PowerShell?
  • select......for update会锁表还是锁行?
  • 信安软考 第十五章 网络安全主动防御技术与应用
  • 面试官:深度不够,建议回去深挖