Vue+ElementUI项目打包部署到Ubuntu服务器中

这篇具有很好参考价值的文章主要介绍了Vue+ElementUI项目打包部署到Ubuntu服务器中。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、修改config/index.js中的assetsPublicPath: '/',修改为assetsPublicPath: './'

assetsPublicPath: './'

Vue+ElementUI项目打包部署到Ubuntu服务器中,服务器,服务器,vue.js,elementui

2、在build/utils.js中增加publicPath: '../../'

publicPath: '../../'

Vue+ElementUI项目打包部署到Ubuntu服务器中,服务器,服务器,vue.js,elementui

3、打开终端,在根目录下执行npm run build进行打包,打包成功后会生成dist

npm run build

Vue+ElementUI项目打包部署到Ubuntu服务器中,服务器,服务器,vue.js,elementui

4、将dist传输到服务器上(我已经把dist重命名为html)

Vue+ElementUI项目打包部署到Ubuntu服务器中,服务器,服务器,vue.js,elementui
5、服务器中如果没有nginx则安装nginx

sudo apt install nginx

6、配置Nginx,编辑Nginx配置文件/etc/nginx/sites-available/default,并将其更改为以下内容

server {
    listen 80;
    server_name 域名.com;  // 替换为您的域名

    root /srv/vue/html;  // 替换为您的打包文件所在的路径

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

7、保存并关闭文件后,重新启动Nginx服务

sudo service nginx restart

注意:如果没有配置端口规则的话是访问不了的,需要开放你的后端端口和前端端口,后端我的是8088,前端是8080。我使用的是宝塔面板,直接在面板的安全中添加规则即可访问。

Vue+ElementUI项目打包部署到Ubuntu服务器中,服务器,服务器,vue.js,elementui文章来源地址https://www.toymoban.com/news/detail-733764.html

到了这里,关于Vue+ElementUI项目打包部署到Ubuntu服务器中的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue项目上线打包好的文件如何在服务器上部署?

    1.打开router下的js文件,调成hash模式: mode:\\\'hash\\\'   2.终端输入: npm run build 3.此时项目中会多出一个dist的文件,这个文件就是我们打包出来的项目   (1)建立一个新的文件夹 (2)终端输入命令: npm init (3)输入: xxx_server (4)然后一路按回车到文件夹——框架完成,如下图

    2024年02月11日
    浏览(56)
  • 手把手教你如何把vue项目打包后部署到服务器(小白教程)

    一.需要用到的工具 vscode 下载链接:Visual Studio Code - Code Editing. Redefined FinalShell 下载链接:FinalShell官网 二.打包步骤 1.vscode打开你的vue项目-- 点终端 -- 输入npm run build 按回车进行打包;  2.打包成功 , 生成了dist文件夹, 打包好的文件会默认存放在里面;   三. 用FinalShell连接服

    2024年02月16日
    浏览(58)
  • 关于前端vue打包项目以及静态网站部署项目到阿里云ECS云服务器初学简单教程

    准备工作: 1.首先进入https://ecs.console.aliyun.com/ 领取或者购买一台简单的ECS云服务器。 进入网站注册登录后拉到页面最下面或者顶部搜索免费云服务器领取立即试用 ,当然富哥花钱买一台服务器也行。   创建完了以后可以进入云服务ECS工作台,然后就是以下界面   点击右边

    2024年02月04日
    浏览(72)
  • SpringBoot + Vue2项目打包部署到服务器后,使用Nginx配置SSL证书,配置访问HTTP协议转HTTPS协议

    配置nginx.conf文件,这个文件一般在/etc/nginx/...中,由于每个人的体质不一样,也有可能在别的路径里,自己找找... 证书存放位置,可自定义存放位置 两个文件 后端配置 把.pfx拷贝到resource下,然后配置一下yml

    2024年02月02日
    浏览(75)
  • 打包前后端项目并部署至服务器

    打包命令: npm run build 执行完命令后,会生成一个名为 dist 的文件夹,这个就是打包好的前端项目。 2.1、执行 maven 的 clean ,删除项目编译创建的 target 文件夹 2.2、执行 package,将项目打包至 target 文件夹下 3.1、连接服务器 3.2、在根目录创建文件夹,并上传打包好的前后端项

    2024年01月23日
    浏览(64)
  • 前端如何将项目打包部署到服务器

      本篇文章从前端项目打包开始,逐步完成项目部署到服务器的操作,这次咱们采取的部署方案是通过vscode中Remote-SSH和SFTP两个插件实现项目部署到服务器,并在服务器上通过nginx代理将请求转发到对应的端口。   先将自己开发完成的本地项目进行打包,打包之后会产生一个

    2024年03月14日
    浏览(71)
  • vue打包部署到服务器,动态获取(修改)对应服务器的请求ip

    需求: vue打包后的文件要部署到不同的服务器上,ip不同,每次部署都要修改对应服务器的ip后打包上线,所以会出现频繁打包的情况 问题:vue项目打包上线不同服务器,需要打包一次能够动态的修改ip地址 思路1: 1.由于vue项目里面public文件在打包时不会被影响,所以可以在

    2024年02月05日
    浏览(46)
  • Golang 打包go项目部署到linux服务器

    我们可以在终端中输入以下代码: 然后就会生成main-linux的二进制可执行文件,然后我们就可以将main-linux放到服务器中的任一目录中,然后我们就可以执行以下命令运行。 这是我们在网上可以搜索到的方法,但是我相信很多人通过这个方法尝试后发现,它并不能运行。我相信

    2024年02月16日
    浏览(67)
  • Nuxt - 项目打包部署及上线到服务器流程(SSR 服务端渲染)

    网上大部分关于 Nuxt 打包部署教程真的是可以用五花八门来形容,这对于第一次接触的朋友简直是无从下手。 本文将尽可能详细的描述,打包部署及上线到服务器完整流程。 强烈建议您打开 官方文档,与本教程对照着,这有助于您更好的理解。 您需要先了解一下 Nuxt 命令及

    2024年02月09日
    浏览(60)
  • 如何使用Vite打包和部署项目到服务器二级路由

    如果你想把你用Vite构建的项目部署到服务器的二级路由上,比如 http://demo.dev/admin/  ,你需要注意以下几个步骤: 基础路径base是指你的项目在服务器上的相对路径,比如你的项目部署在  http://demo.dev/admin/  上,那么你的基础路径就是 /admin/ 。你需要在两个地方配置基础路径

    2024年02月04日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包