【较全面已成功部署】vue项目部署到服务器流程

步骤：

1. 下载Node.js & yarn

首先去进入官网下载node，点击下载即可

常规的流程就安装好了，尽量下载

node-v16.4.1-x64.msi

文件，这个可以自动配置环境变量

如果用到了yarn，到官网下载即可

然后测试一下是否安装成功，打开cmd

2. 打开你的vue项目路径(含有package.json文件路径)

先安装依赖包

用管理员模式打开cmd

输入

npm install

如果有yarn

yarn install

编译一下子

npm run build

yarn run build

开发模式运行一下子

npm run serve

yarn run serve

编译后项目打包成功会生成一个dist文件夹

【较全面已成功部署】vue项目部署到服务器流程 | 用到Node&yarn

文件结构大概是这个样子

给他上传到服务器上

对应的二级域名下创建的文件夹中，或者按照你的路径放置，然后配置nginx服务器即可

(无宝塔面板)

教程点击

(有宝塔面板)

这个打开基本就可以了

此处以下内容参考博客链接

3. 配置nginx.conf

server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root /home/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  //解决刷新页面变成404问题的代码
        }
        location /api{
             rewrite  ^/api/(.*)$ /$1 break;
             proxy_pass http://localhost:8080;
        }
    }

listen ：表示监听端口8080
location ：dist文件夹放置的位置
/api ：因为vue前端代理的时候，用的是api做名字，所以我们要在此处配置后端api端口：

//vue代理
proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {'^/api': ''}
      }
    },

【较全面已成功部署】vue项目部署到服务器流程 | 用到Node&amp;yarn

步骤：