Vue代码部署到阿里云

前言：

先部署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文件，修改如下

#user www-data;
user root;

4.可以用nginx -t来检查配置是否有问题
5.设置完成，重启nginx就行

sudo service nginx start

6.访问网址：

 www.zhang18.top

参考:

https://zhang18.top/program/67.html

https://blog.csdn.net/qq_41980461/article/details/97621262