Vue代码部署到阿里云

最新推荐文章于 2025-06-11 16:58:48 发布

zhen24

最新推荐文章于 2025-06-11 16:58:48 发布

阅读量465

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue Vue

原文链接：https://zhang18.top/program/67.html

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何将Vue项目通过nginx进行部署的过程，包括项目打包、服务器目录设置、nginx配置等关键步骤，适用于同时运行Django后端的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

先部署Django(80端口),再部署Vue(8080),前端代码访问后台是ip:80端口．

以下都是基于以上为前提的，如果不是请酌情修改．

TP传送：Django 项目部署

一.项目打包

打开项目的config--->index.js，改动如下两处代码:

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',    // 1- 这里最初为'/'改为'./'

    /**
     * Source Maps
     */

    productionSourceMap: false,   // 2- 这里最初为true改为false
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

改动完成之后执行:

npm run build

出现dist文件夹

二.项目部署

1.服务器上新建目录存放网站文件，dist里面是index.html,还有其他静态文件

data/www/dist

2.在nginx的conf.d目录下新建一个文件blog.conf
不开启https

server {
    listen 80;
    server_name 198.168.0.1;  #服务器ip地址

    location / {
        root   /data/www/dist;　　　＃　dist项目绝对路径
        index  index.html index.htm;
        if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    		}    
	}
}

开启https

server {
    listen 443 ssl;
    server_name zhang18.top www.zhang18.top;
    ssl_certificate /etc/letsencrypt/live/zhang18.top/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/zhang18.top/privkey.pem;

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

server {
    listen 80;
    server_name zhang18.top www.zhang18.top;
    return 301 https://$host$request_uri;
}

3.打开nginx.conf文件，修改如下