宝塔部署VUE2项目流程

1.vue项目打包

1.vue.config.js文件在module.exports={}下加入关键代码

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: './',
  outputDir: 'dist',
  assetsDir: '',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: 8090,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
}

2.在package.json文件 加入打包命令

 "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode prod",

2.宝塔面板-安全-开放端口

### 如何在宝塔面板上部署 Vue 前端项目 #### 准备工作 确保已经拥有阿里云或其他服务商提供的服务器资源,并完成基础配置。对于初次使用者来说,下载并安装适合Linux系统的宝塔面板至关重要[^2]。 #### 下载与安装宝塔面板 选择Linux版本的宝塔面板进行安装,Windows版不适用于此场景因缺乏终端支持功能。可以通过官方渠道获取最新版本的安装包来执行安装操作。 #### 初始化宝塔面板环境 首次登录时按照指引完成LNMP(Linux, Nginx, MySQL, PHP)开发环境的选择与安装,这一步骤通常建议采用默认推荐选项以简化流程[^4]。 #### 创建新站点 进入宝塔面板后,在“网站”模块下点击创建新的站点入口。此时可任意指定一个未被占用的域名作为访问地址,同时保证所填写的IP地址和端口号匹配实际服务器设置[^3]。 #### 构建Vue应用程序 本地环境中准备好要发布的Vue应用,通过命令`npm run build`将其编译成生产模式下的静态文件集合。这些经过优化处理后的HTML/CSS/JS等资源将会成为最终上线的内容。 #### 上传构建成果至服务器 将前面提到的打包产物复制到刚刚建立好的站点对应的文档根目录内。具体做法是在宝塔面板中的“文件管理器”找到目标位置,再借助FTP/SFTP等方式传输过去。 #### 调整Nginx配置 为了使Nginx能够正确解析单页(SPA)应用的历史路由模式等问题,可能需要手动编辑该站台关联的Nginx配置文件,比如调整`try_files $uri $uri/ /index.html;`这样的指令指向。 #### 测试发布效果 一切准备就绪之后,记得重启Nginx服务让更改生效。最后打开浏览器尝试访问设定好的网址加上相应的端口(如果有的话),确认页面能否正常加载展示出来。 ```bash sudo systemctl restart nginx ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值