当前位置： 当前位置：首页 > 探索 > 腾讯云怎么部署自己的vue项目正文

腾讯云的腾讯轻量应用服务器，是云部我部署Vue项目最顺手的工具。别急着买最高配，署自一个2核4G的腾讯实例，跑中小型Vue应用绰绰有余，云部一个月几十块，署自比在本地折腾Nginx省心多了。腾讯 先说说最直接的云部流程。你得有个服务器，署自然后装好Node.js和Nginx。腾讯用SSH连上服务器，云部命令就三行：`curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -`，署自接着`sudo apt install -y nodejs`，腾讯最后`sudo apt install nginx`。云部装完检查版本，署自`node -v`和`nginx -v`，有输出就说明环境齐了。 重点来了，项目怎么上去？别用笨办法传文件。我习惯在本地构建好，然后直接推到服务器。在项目根目录跑`npm run build`，会生成一个`dist`文件夹。然后你用`scp -r ./dist root@你的服务器IP:/var/www/vue-app`，一条命令把整个静态文件包扔过去。这里有个小坑，记得先`ssh`连上去创建`/var/www/vue-app`目录，不然scp会报错。 接下来是Nginx配置，这是最容易被忽视的环节。很多人直接改默认配置，结果路由刷新就404。你需要新建一个配置文件，`sudo nano /etc/nginx/sites-available/vue-app`，内容长这样： ```nginx server { listen 80; server_name your_domain_or_ip; root /var/www/vue-app; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 关键就一行`try_files`，这行代码解决Vue Router的history模式刷新问题。没有它，你点浏览器刷新，页面直接白屏。保存后，`sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/`，然后`sudo nginx -t`测试配置，最后`sudo systemctl reload nginx`生效。 有个细节我踩过坑：Vue打包后的静态资源路径。如果你的`vue.config.js`里没设置`publicPath: './'`，那部署到服务器根目录没问题，但如果放在子目录，CSS和JS全加载不出来。我吃过这个亏，部署完页面空白，F12一看全是404，折腾半小时才发现是路径问题。所以配置里最好写死相对路径，省得以后迁移麻烦。 部署完成后，访问服务器IP，看到你的页面跑起来，那种感觉挺奇妙的。但别急着庆祝，先测两个东西：第一，强制刷新页面（Ctrl+Shift+R），确认路由没崩；第二，直接访问一个深层路由，比如`/about`，看看能不能正常返回。这两关过了，基本就稳了。 对了，腾讯云有个安全组功能，默认只开放22端口（SSH），你得去控制台把80端口（HTTP）和443端口（HTTPS）放行。不然Nginx配得再好，外部也访问不到。这个操作在“防火墙”页面，添加规则，端口填80，来源填`0.0.0.0/0`，保存就行。 最后说个提升体验的小技巧——用PM2守护Node进程，如果你有后端API的话。但纯前端Vue项目，Nginx就够了，别多装东西，服务器越精简越不容易出问题。我见过有人为了部署Vue，又是装Docker又是配Jenkins，结果服务器负载高得吓人，其实一个Nginx静态托管，性能已经顶到天了。