V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LeeReamond
V2EX  ›  问与答

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

  •  
  •   LeeReamond · 2020-03-10 18:03:17 +08:00 · 662 次点击
    这是一个创建于 2010 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,使用最新安装的 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 一步到胃的办法 感谢各位带哥。

    目前尚无回复
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   916 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:50 · PVG 04:50 · LAX 13:50 · JFK 16:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.