tongweb部署vue前端页面的方法

tongweb部署vue前端页面的方法

1、在同一端口号下部署

把vue项目install 、运行、build完了的dist包压缩打包,上传到服务器解压,然后在解压完了的目录里新建一个空的WEB-INF文件夹。然后在tongweb管理控制台中的应用管理部署应用,选择部署方式的时候上传方式选择服务器而不是本机的方式进行部署。当遇到部署成功,打开页面显示空白,vue打包的时候可以设置的,比如你要部署在tongewb下,tongweb的端口是8088,假设你的应用要部署在aaa目录下,访问的时候就需要http://ip地址:8088/aaa,那么vue打包的时候就需要把相对路径改成aaa目录下,并且要把dist目录改成aaa(可以在打包完了上传到服务器之后再改)
这种方法会造成一些文件找不到

2、在不同端口号部署

不需要相对路径保持一致,在部署时创建的WEB-INF的文件夹下创建一个web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
	<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	         xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
	         id="scplatform" version="2.5">
	    <display-name>/</display-name>
	    <error-page>
	        <error-code>404</error-code>
	        <location>/index.html</location>
	    </error-page>
	</web-app>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 要部署Vue项目,首先需要确保电脑上安装了Node.js和Vue CLI。如果没有安装,可以在官方网站下载和安装。 1. 打开命令行工具,进入Vue项目的根目录。 2. 执行命令`npm install`,将会安装项目所需的依赖项。等待安装完成。 3. 接下来,执行命令`npm run build`,这将会编译Vue项目并生成一个用于部署的静态文件夹(默认是"dist")。 4. 将生成的静态文件夹("dist"文件夹)复制到服务器上。可以使用FTP工具或其他方式进行文件传输。 5. 服务器端需要配置一些基本的设置,确保能够正确访问到Vue项目。比如,如果使用Apache服务器,可以添加一个虚拟主机配置,将指向Vue项目的请求导向静态文件夹。 6. 确保服务器上安装了Node.js环境,因为基于Vue的项目通常需要Express等服务器端框架。 7. 在服务器上运行命令`npm install`,安装项目的依赖项。 8. 运行命令`npm run start`,以启动服务器。 9. 访问服务器的域名或IP地址,就可以在浏览器中看到部署好的Vue项目了。 需要注意的是,部署Vue项目可能还涉及到一些其他的细节,比如服务器端的一些配置项,开启gzip压缩,设置缓存等。具体的部署步骤和配置会因服务器环境而有所不同,可以根据情况进行调整。 ### 回答2: 要在Tongweb部署Vue项目,我们可以按照以下步骤进行: 1. 首先,确保你已经安装了Node.js和npm(Node.js的包管理工具)。 2. 在本地开发环境中,使用Vue CLI创建一个新的Vue项目。你可以运行命令`vue create my-project`,然后按照向导选择所需的配置。 3. 完成项目创建后,进入项目目录,运行`npm run build`命令来构建Vue项目。这将生成一个dist目录,其中包含了打包好的静态文件。 4. 将dist目录下的文件复制到Tongweb的静态资源目录中(通常是public或者static目录)。你可以使用FTP、SCP或者其他文件传输工具进行文件复制。 5. 在Tongweb上配置反向代理,将对应的请求路由到Vue项目的静态资源。你可以编辑Tongweb的配置文件,添加类似下面的配置: ``` location / { proxy_pass http://localhost:8080; } ``` 这里假设Vue项目运行在本地的8080端口上,你可以根据实际情况进行修改。 6. 保存配置文件,并重启Tongweb服务器,使配置生效。 7. 现在,你可以通过Tongweb服务器的域名或者IP地址访问你的Vue项目了。 通过以上步骤,就可以在Tongweb上成功部署Vue项目了。记得要定期更新静态文件,以保持项目的最新状态。另外,根据具体的需求,你可能还需要配置Tongweb的其他功能,例如SSL证书、缓存等。 ### 回答3: 要部署tongwebVue项目,首先需要确保已经安装了Node.js和Vue CLI工具。接下来,可以按照以下步骤进行部署: 1. 在服务器上或者本地创建一个用于部署的文件夹,并在终端中导航到该文件夹。 2. 使用以下命令克隆Vue项目的代码库到当前文件夹中: ``` git clone [项目代码库的URL] ``` 3. 进入项目文件夹: ``` cd [项目文件夹名] ``` 4. 在终端中安装项目所需的依赖: ``` npm install ``` 5. 构建Vue项目: ``` npm run build ``` 这将生成一个用于部署的dist文件夹,其中包含了已打包好的静态文件。 6. 配置服务器。 - 如果使用的是Nginx服务器,可以在配置文件中设置根目录为Vue项目的dist文件夹,并将其绑定到指定的域名或IP地址上。 - 如果使用其他类型的服务器,需要将dist文件夹中的静态文件复制到服务器上的指定目录。 7. 启动服务器: - 如果使用的是Nginx服务器,需要启动Nginx服务使其生效。 - 如果使用其他类型的服务器,按照服务器的设置方式启动服务。 8. 尝试从浏览器中访问Vue项目的域名或IP地址,应该可以看到部署成功的Vue应用程序。 通过按照上述步骤进行操作,就可以成功部署tongwebVue项目。请注意,这只是一个基本的部署过程,具体步骤可能因实际情况而有所变化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值