Vue 能否实现修改 webpack 输出目录(的同时,不改变前端请求地址格式,配合 Django)?

2020-03-10 18:03:17 +08:00
 LeeReamond

如题,使用最新安装的 vue-cli 4.12 初始化项目,webpack 没调明白。

我想要的效果是这样: 源码部分,在同一个 git 项目里项目目录为

/Django        #  项目目录
..../src       #  vue 的 src 目录
..../app.py    #  Django 服务入口

在 CICD 里安装 vue 并编译 src,会自动生成 templates 和 static,得到如下结果

/Django        #  项目目录
..../templates #  存放所有 html 模板
..../static    #  存放 vue 的 assets 和 favicon
..../src       #  vue 的 src 目录
..../app.py    #  Django 服务入口

显然需要自定义配置一下 webpack,我遇到的问题如下:

=====================================================================分割线

印象中 vue-cli2 时代用过 vue,当时还是能配置输出路径的,时间太久了忘记了,vuecli 各种 api 变动,我真的很好奇为啥这种 api 都能说改就改。。。实在是不会用。。。。。

然后昨天配置的时候看文档,目前在 vue.config.js 里能修改的配置如下:

publicPath: '/',
outputDir: 'templates',
assetsDir: 'static',
indexPath: 'index.html',

其中 outputDir 配置所有文件输出目录,assetsDir 配置 css 和 js 的输出目录, 有两个问题

1、我可以修改 assetsDir 到指定的位置,比如修改为'../static',这样打包后会得到 css 和 js 在 static 目录里,html 在 templates 目录里,目录结构是对的。然而如果这么改的话,所有前端请求 css 的地址就会变成类似这样:localhost:8080/../static/css/filename.css ,他把相对目录的..也加到请求目录里去了,Django 挂载以后当然服务跑不起来。所以一个问题就是能否实现请求地址和输出目录分离,无论 webpack 输出目录为何,都前端请求地址统一都为 localhost:8080/css/filename.css 这样。

2、第二个问题有关 favicon, 我没有在文档里找到怎么配置 favicon 输出目录的方法,默认是和所有 html 放在一起的。但是如果用 Django 挂载服务的话显然 html 要放在 templates 里,而 favicon 则是一个单独的静态文件。这个该怎么修改?

===========================================================================

我就想配置一些简单的网络服务,可以快速写业务代码快速部署的,这个问题换 nginx 独立跑前端就能解决了,但是每次项目还需要额外配 nginx 接 wsgi 等等太麻烦了。

我想知道有没有 webpack 一步到胃的办法 感谢各位带哥。

663 次点击
所在节点    问与答
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/651604

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX