const {defineConfig} = require('@vue/cli-service')

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,//关闭语法检查
    
    // 基本路径（下面是重点）
    publicPath: '/',
    // 输出文件目录
    outputDir: 'dist',
    configureWebpack: {
        externals: {}
    }
})

2、编译项目

npm run build

这时候可以发现，工程中多了一个dist文件夹，里面就是编译后的工程，可以直接拿来部署。

传输项目到服务器

这里用的是filezilla工具，如果你的ubuntu服务器没有开启相应的服务的话是使用不了的。也先贴出教程，博主亲测，两种方法都可行。

ubuntu ftp连接 filezilla连接 FileZilla提示错误:认证失败,严重错误,无法连接到服务器：huizai的博客 – IIS7站长之家【WWW.IIS7.COM】

安装完之后直接将dist文件夹传输到服务器上就行。

修改nginx配置

配置文件在/etc/nginx下，叫nginx.conf，打开可以发现他include另外两个文件夹，/etc/nginx/conf.d/*.conf;/etc/nginx/sites-enabled/*；去这两个文件夹下看一下可以发现前一个是空的，后一个有一个default文件快捷方式，指向的问价你在/etc/nginx/sits-available，我们要修改的就是这个文件。

可以把文件中其他内容都注释掉，然后添加一下内容

server {
    listen 8080;#前端端口
    server_name web_ui;#服务名，类似域名

    location / {
        root /home/Project/web_ui/dist; #刚才传输的dist文件夹
        try_files $uri $uri/ /index.html; #防止刷新网页时出现404报错
        index index.html index.htm；
    }

    location /vcipro-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass https://10.40.100.15:8020/;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

顺便贴一下ubuntu下vim使用技巧的两篇文章

VIM命令大全_wongIEEE的博客-CSDN博客_vim命令

ubuntu中vim多行注释与取消注释_一只大大大媛的博客-CSDN博客_ubuntu注释

修改启动用户

这个在/etc/nginx/nginx.conf中，将user www-data;修改成user root;否则启动后，网页会显示403forbidden，且在日志中会看到(13: Permission denied)报错。

这个错误的参考资料如下解决Nginx出现403 forbidden (13: Permission denied)报错的四种方法_西奥斯的博客-CSDN博客_nginx403

重启服务

service nginx restart

打开网页

http://服务器地址:8080/

前端踩坑记录

无法使用getCurrentInstance.ctx.$refs获取页面组件元素

这是由于使用dist打包后getCurrentInstance属性会失效，解决办法如下：

import { ComponentInternalInstance, getCurrentInstance } from "@vue/runtime-core";

let currentInstance = getCurrentInstance() as ComponentInternalInstance;

currentInstance.ctx._.refs.test.test();

后端及数据库部署

由于Django后端及Mysql数据库都不是很复杂，因此，我选择直接搭建开发环境的方式。可以参考博主的这几篇文章。

【web系列二】Django服务器搭建_Nicholson07的博客-CSDN博客_django 服务端

【web系列十】Vue3+Django+MySQL搭建前后端框架_Nicholson07的博客-CSDN博客_前后端通信框架

【web系列十一】使用django创建数据库表_Nicholson07的博客-CSDN博客_django创建数据库表

mysql踩坑记录

版本问题

值得注意的是，Ubuntu下Mysqldb不兼容Python3.5，可以使用Pymysql替代，需要修改一下代码，修改完的版本在win下也可以正常运行，博主亲测。

报错如下：NameError: name ‘_mysql’ is not defined

1、安装pymysql

pip install pymysql

2、配置数据库

修改项目的setting.py文件

import pymysql 
pymysql.install_as_MySQLdb()

3、如果还报错

django.core.exceptions.ImproperlyConfigured: mysqlclient 1.4.0 or newer is required; you have 0.10.1.

可以加一行代码，直接指定版本来解决。

import pymysql
pymysql.version_info = (1, 4, 13, "final", 0)
pymysql.install_as_MySQLdb()

远程访问

在博主的这篇文章->数据库部署->Ubuntu系统下要注意中有了记录。

【web系列九】快速上手MySQL数据库_Nicholson07的博客-CSDN博客

中文乱码

ubuntu下数据库默认是无法显示中文的，中文数据会显示为'”??”。

需要修改一下Mysql的配置文件，在/etc/mysql/mysql.cnf，要注意系统版本。

[client]
default-character-set=utf8
[mysqld_safe]
default-character-set=utf8
[mysqld]
default-character-set=utf8  #ubuntu12.04以前的版本
character-set-server=utf8   #ubuntu12.04以后的版本
[mysql]
default-character-set=utf8

然后重启mysql，下面两种方式都可以。

/etc/init.d/mysql restart
service mysql restart

旧的mysql数据表是不会生效的，需要重新创建，然后可以输入以下执行查看是否修改成功了。

show variables like 'character%';

+--------------------------+----------------------------+
| Variable_name | Value |
+--------------------------+----------------------------+
| character_set_client | utf8 |
| character_set_connection | utf8 |
| character_set_database | utf8 |
| character_set_filesystem | binary |
| character_set_results | utf8 |
| character_set_server | utf8 |
| character_set_system | utf8 |
| character_sets_dir | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+