django+vue3项目搭建

/myproject                           // 项目目录

|-- docs/                            // 项目相关资料保存目录
|-- server/                          // 后端代码
|-- front/                           // 前端代码
|-- .gitignore                       // git忽略文件配置

后台的目录结构，针对官方建议的格式有所调整

/server

|-- logs/                            // 日志
|-- server/                          // 项目主应用，开发时的代码保存
|   |-- apps/                        // 开发者的代码保存目录，以模块[子应用]为目录保存
|   |-- libs/                        // 第三方类库的保存目录[第三方组件、模块]
|   |-- settings/
|   |   |-- dev.py				     // 项目开发时的本地配置
|   |   |-- prod.py					 // 项目上线时的运行配置
|   |   |-- test.py					 // 测试人员的配置文件
|   |-- urls.py                      // 总路由
|   |-- utils/                       // 多个模块[子应用]的公共函数类库[自己开发的组件]
|-- scripts/                         // 保存项目运营时的脚本文件
|-- manage.py

由于django的manage.py默认配置为后台根目录的setting.py，按照以上目录是不匹配的

def main():
    """Run administrative tasks."""
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'server.settings')

我们可以将django默认的setting.py配置复制到settings/dev.py或者settings/prod.py进行自定义配置，所以manage.py可以改为

def main():
    """Run administrative tasks."""
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'server.settings.dev')

如果配置了服务器，关于wsgi的配置也需要做适应修改

前端目录结构：常规vue推荐目录

/front

|-- dist/                            // 打包目录
|-- node_modules/                    // npm加载项目的依赖模块
|-- public/                          // 静态资源目录，不会被webpack构建
|-- src/                             // 源码目录
|   |-- assets/                      // 资源目录，这里的资源会被wabpack构建
|   |-- components/                  // 组件目录，页面用到的组件一般放在这，里面可以根据模块再细分目录
|   |-- router/						 // 前端路由
|   |-- store/						 // 应用级数据（state）
|   |-- views/						 // 页面目录
|   |-- App.vue                      // 目的主组件，所有页面都是在该组件下进行切换的
|   |-- amin.js                      // 项目的入口文件，作用是初始化 vue 实例，并引入所需要的插件
|-- .browserslistrc                  // 配置兼容浏览器
|-- .editorconfig					 // 编辑格式配置
|-- .eslintrc.js					 // ESlint 检查配置
|-- babel.config.js					 // babel配置文件
|-- package.json					 // 存放项目的依赖配置（比如 vuex，element-UI）
|-- vue.config.js					 // vue 的配置文件
...

判断是否安装nodejs环境

# 可能npm版本落后，执行指令更新至最新
npm install -g npm

判断是否安装vuejs

# 未安装的情况
npm install -g @vue/cli
# 安装完成再执行上图判断是否可用vue

新建vue项目

vue create my_vue

选择default则会自动创建完成，选择最后一项可自行选择配置，我选择自行配置

vue打包后其实可以当做django的内部静态页面，访问网页先获取这些静态页面渲染，再通过django接口请求数据

django访问静态资源靠一个配置：STATIC_URL，这个配置的默认值是STATIC_URL = ‘/static/’，即在static文件夹中访问静态资源。dist目录中没有static文件夹，就会出现404找不到资源的报错。
具体解决方式：
前端webpack打包配置修改，指定放置生成的静态资源 (js、css、img、fonts) 的目录

// vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: 'static'  // 加上这一句，指定静态文件统一放在static目录
});

这样，前端打包后，会自动生成这样的结构

然后配置django.settings：比如我们打包出来dist文件夹，将它放在django根目录

|-- my_django/
|   |-- dist/  
|   |	|-- static/ 

指定入口页面，my_django/urls.py

配置Nginx静态目录，这样静态文件的请求由Nginx直接Nginx处理直接返回，不会再转发django后台处理
找到Nginx配置文件nginx.conf

server{
	...
	location /static {
		alias /var/www/my_django/dist/static;
	}
	
	location / {
		...
	}
	...
}

前端还是改webpack配置，使之静态文件的请求都含有/static

// vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  assetsDir: 'static'  // 加上这一句，指定静态文件统一放在static目录
});

跨域配置暂未尝试，网上也有较多的教程