阿里轻量服务器如何使用nginx部署vue项目（宝塔 新手版）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 添加站点
- vue项目的路由配置
- vue 项目的打包
- 上传打包好的vue项目到宝塔linux
- 通过宝塔文件管理器上传
- Nginx配置
- 1. 配置伪静态
- 2. 修改配置文件
- 文件权限设置
- 重启 Nginx
- 运行结果
前言
这俩天搞了一个阿里云的轻量级服务器玩了一下，太难受了！作为新人的我什么都不懂，也是发生了很搞笑的事情，一直以为自己的计算机网络学的还不错，结果在配置服务器的时候到处碰壁，我一时竟然搞不懂ssh,以及公网，内网，也是在到处找资料，问Ai 当然客服没少问，客服给我打了好几个电话后，终于搞懂了一点头绪
添加站点
使用nginx部署vue项目首先先在“网站->php项目”下添加站点
域名:那一块如果没有添加自己公网ip
php:的话使用纯静态注意不要像图面上的一样选php,我们是前端，纯静态就行了
其他的保持默认就可以了，因为是vue项目，就没有必要配置数据库了
vue项目的路由配置
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history', // 使用 history 模式
base: process.env.BASE_URL,
routes: [
// 您的路由配置
]
})
vue 项目的打包
- 打包的时候要有管理员的权限，windowPowerShell 并不能执行打包命令,会报错的！
- 我们使用win+R 在输入cmd
- 使用cd命令进入到我们的要打包的项目的package.json,那个目录下，例如下面这个目录结构
- 使用npm run build 进行项目的打包，打包好这个在项目的目录下会有一个dist 文件夹，上面的图片中有 。
上传打包好的vue项目到宝塔linux
这里我们使用最简单的方法来上传文件，大家可以使用ftp的方式上传，本来想用ftp 的方式上传的但不知到为什么只能上传文件夹上去，文件上传不上去，显示错误，有没有懂得大佬！！！求指点
通过宝塔文件管理器上传
因为你上面已经建了站点了，所以在/www/wwwroot目录下会有一个你公网ip同名得文件夹
除了.htaccess文件其他的都可以删了
然后点击上传把我们的dist下的文件都上传进来，下面是我上传好的示例
Nginx配置
1. 配置伪静态
大家可以安装我图片上的步骤，就会弹出“站点修改对话框”，然后在伪静态中添加下面的代码
location / {
try_files $uri $uri/ /index.html;
}
2. 修改配置文件
点击「配置文件」，在 server 块中添加以下配置：
server {
listen 80;
server_name your-domain.com;
root /www/wwwroot/your-domain;
index index.html index.htm;
# Vue Router history 模式支持
location / {
try_files $uri $uri/ /index.html;
}
# 静态资源缓存配置
location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Access-Control-Allow-Origin "*";
}
# 禁止访问 .ht 文件
location ~ /.ht {
deny all;
}
# Gzip 压缩
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
gzip_comp_level 6;
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/svg+xml
text/css
text/javascript
text/plain
text/xml;
}
文件权限设置
在终端中执行
# 进入网站根目录
cd /www/wwwroot/您的域名
# 设置正确的文件权限
chown -R www:www ./
find ./ -type f -exec chmod 644 {} ;
find ./ -type d -exec chmod 755 {} ;
重启 Nginx
# 在宝塔终端执行
nginx -t # 检查配置语法
nginx -s reload # 重新加载配置
# 或者在宝塔面板操作
# 点击「网站」→ 找到您的网站 → 点击「重启」
运行结果
可以看到已经成功了，图片没显示出来，是因为cors的问题以及我的后端的数据库还没有在服务器上配置成功
