如何在阿里云服务器上通过Nginx配置不同二级域名下的Vue项目,并且正确设置Vue项目的静态资源路径?
时间: 2024-11-18 21:33:11 浏览: 1
要在阿里云服务器上部署不同二级域名下的Vue项目,同时确保静态资源的正确加载,需要进行一系列详细的配置。首先,要理解Nginx如何通过不同的location指令来区分不同路径下的请求。在Nginx的配置文件中,对于每个Vue项目的访问路径都需要单独配置location块,并通过root或alias指令指定项目dist目录的路径。
参考资源链接:[Nginx部署多Vue项目实战与配置教程](https://wenku.csdn.net/doc/645a0132fcc53913682627c9?spm=1055.2569.3001.10343)
例如,如果你有两个Vue项目,一个通过根路径访问,另一个通过二级域名访问,你可以这样配置Nginx:
```
server {
listen 80;
server_name **.**.***.**;
location / {
root /path/to/root-project/dist;
try_files $uri $uri/ /index.html;
}
location /student {
alias /path/to/student-project/dist;
try_files $uri $uri/ /student/index.html;
}
}
```
在Vue项目层面,根据项目部署的路径不同,需要调整`config/index.js`文件中的`assetsPublicPath`属性。对于二级域名下的项目,应将其设置为对应的路径:
```javascript
module.exports = {
build: {
assetsPublicPath: '/student/' // 对应二级域名项目的公共路径
}
}
```
此外,确保`index.html`文件中包含了正确的基础URL标签,以便正确地加载静态资源:
```html
<meta-base href=
参考资源链接:[Nginx部署多Vue项目实战与配置教程](https://wenku.csdn.net/doc/645a0132fcc53913682627c9?spm=1055.2569.3001.10343)
阅读全文