vue项目部署到宝蓝德bws服务器下

Question

vue项目使用history模式 打包后部署到宝蓝德的bws服务器上 后端的应该怎么配置 或者是怎么在服务器上配置相关文件

Answer 1

引自免费微信小程序：皆我百晓生

要在宝蓝德BWS服务器上部署Vue.js项目，并且使用history模式，你需要进行以下几个步骤：

1. 首先，确保你的Vue项目已经正确配置并打包为生产环境版本。在命令行中运行以下命令：

npm run build --mode production

这将会生成一个名为dist的目录，其中包含所有必要的静态资源。

1. 将dist目录中的内容上传到BWS服务器上的web根目录。例如，如果你的网站根目录是/var/www/html，则将dist目录下的内容复制到这个路径。

2. 在BWS服务器上，你需要配置反向代理以支持Vue应用的history模式。由于BWS服务器可能使用Apache或Nginx作为Web服务器，这里分别提供两种服务器的配置示例。

对于Apache，你需要编辑虚拟主机配置文件（通常是httpd.conf或apache2.conf），并在适当的位置添加以下内容：

<VirtualHost *:80>
    ServerName your-domain.com
    DocumentRoot /var/www/html/dist

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.html [L]
</VirtualHost>

请将your-domain.com替换为你的实际域名。

对于Nginx，你需要创建一个新的server块或者修改现有的server块，在/etc/nginx/sites-available/目录下的配置文件中添加或修改以下内容：

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/html/dist;
    index index.html;

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

同样地，将your-domain.com替换为你的实际域名。

1. 保存配置文件并重启Web服务器以使更改生效。对于Apache，可以使用：

sudo service apache2 restart

对于Nginx，使用：

sudo service nginx reload

完成以上步骤后，你应该可以在浏览器中通过你的域名访问Vue.js应用，即使有复杂的URL路径，应用也能正常工作，因为反向代理会将所有的请求重定向到index.html，然后由Vue.js的路由处理。