3.17

以下是在前端 Vue 项目中将其部署到 8081 端口上的步骤：

一、开发环境（通过 Vue CLI 本地开发服务器）

1. 修改配置文件
   • 找到项目根目录下的vue.config.js文件。如果没有这个文件，可以自己创建一个。
   • 在文件设置中devServer的port属性为 8081：

JavaScript

 

module.exports = {
  devServer: {
    port: 8081
    // 其他 devServer 配置项
  }
  // 其他项目配置
};

 

2. 启动开发服务器
   • 在项目根目录下运行命令npm run serve或者yarn serve，这将启动 Vue 项目的本地开发服务器，并且服务器会监听 8081 端口。你可以在浏览器中访问http://localhost:8081来查看项目。

二、生产环境（部署到服务器）

1. 构建生产环境文件
   • 在项目根目录下运行命令npm run build或者yarn build。这会将 Vue 项目编译成生产环境可用的静态文件，通常这些文件会被输出到dist目录下（具体输出目录可以根据vue.config.js中的outputDir配置来确定）。
2. 配置服务器
   • 使用 Nginx ：
     • 安装 Nginx。在 Ubuntu 系统上可以使用命令sudo apt - get install nginx进行安装。
     • 配置 Nginx。编辑 Nginx 配置文件（通常位于/etc/nginx/sites - available/default），添加如下配置：

 

server {
    listen 8081;
    server_name localhost;

    location / {
        root /path/to/your/vue/project/dist; # 替换为你的 Vue 项目 dist 目录的实际路径
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

 

 

   * 测试 Nginx 配置是否正确，使用命令`sudo nginx -t`。如果没有问题，重启 Nginx 服务，命令为`sudo systemctl restart nginx`。然后你就可以在浏览器中通过`http://your_server_ip:8081`（将`your_server_ip`替换为你的服务器 IP 地址）来访问 Vue 项目了。

 * **使用 Apache** ：
   * 安装 Apache。在 Ubuntu 系统上可以使用命令`sudo apt - get install apache2`进行安装。
   * 配置 Apache。编辑 Apache 配置文件（通常位于`/etc/apache2/sites - available/000 - default.conf`），添加如下配置：

 

<VirtualHost *:8081>
    ServerName localhost

    DocumentRoot /path/to/your/vue/project/dist # 替换为你的 Vue 项目 dist 目录的实际路径

    <Directory "/path/to/your/vue/project/dist">
        Options FollowSymLinks
        AllowOverride None
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

 

 

   * 启用 Apache 的`proxy`和`proxy_http`模块（如果需要代理后端 API），使用命令`sudo a2enmod proxy proxy_http`。
   * 重启 Apache 服务，命令为`sudo systemctl restart apache2`。之后就可以通过浏览器访问`http://your_server_ip:8081`来查看 Vue 项目。