将 vue.config.js
修改为:
module.exports = {
assetsDir: 'static',// 静态资源打包输出目录 (js, css, img, fonts),相应的url路径也会改变
};
然后运行 npm run build
,生成的 dist
文件夹结构如下
📁 dist/
├── 📁 static/
│ ├── 📁 css/
│ └── 📁 js/
├── favicon.ico
└── index.html
将 dist
复制到 Django 项目根目录下,然后修改 settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),# 项目默认会有的路径,如果你部署的不仅是前端打包的静态文件,项目目录static文件下还有其他文件,最好不要删
os.path.join(BASE_DIR, "dist/static"),# 加上这条
]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates'),
os.path.join(BASE_DIR,'dist')] # 加上这条,其余的是默认配置
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]