[分享]宝塔运行vue项目

随着前端技术的不断发展，Vue.js已经凭借其强大的性能和易用性走向了世界舞台的中央，成为了目前最热门的前端框架之一。而如果您想将Vue.js的技术应用到您的网站中，那么宝塔面板则是一个必不可少的工具...

随着前端技术的不断发展，Vue.js已经凭借其强大的性能和易用性走向了世界舞台的中央，成为了目前最热门的前端框架之一。而如果您想将Vue.js的技术应用到您的网站中，那么宝塔面板则是一个必不可少的工具。因此，本文将为您详细介绍如何使用宝塔面板来运行Vue项目，并为您提供一份简明的步骤指南以及必要的代码说明。

第一步：在服务器上安装Node.js和npm包管理器

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

第二步：安装Vue-cli

npm install --global vue-cli

第三步：创建一个新的Vue.js项目

vue init webpack my-project
cd my-project
npm install

第四步：使用npm run build命令来构建项目

npm run build

第五步：将 Vue 项目目录下dist目录下的所有文件上传至您的服务器

scp -r ./dist root@服务器IP:/data/wwwroot/default/

第六步：使用宝塔面板创建一个新的网站

进入宝塔面板后，点击“网站”栏目，选择“添加站点”，填写您的域名和网站目录名称，并点击“提交”即可。

第七步：配置Nginx伪静态规则

在“网站”中，找到您刚才添加的站点，点击“设置”，再点击“Apache/Nginx设置”选项卡，在“Nginx 配置文件”代码区域中添加以下代码：

location / {
    if (!-e $request_filename) {
        rewrite ^/(.*)$ /index.html last;
    }
    index index.html index.htm;
}

第八步：重启Nginx服务器

在“网站”中，找到您刚才添加的站点，点击“重启 Nginx”即可。

现在，您的Vue项目已经成功部署到了服务器上。通过域名或IP地址即可访问您的Vue应用。