【问题背景】

用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等

【问题原因】

vue cli 3.0打包后,dist目录下没有static目录,而Django那边的静态资源配置只认static,其他目录好像没用

【解决方法】

现在Django项目setting.py里面检查静态文件的配置

然后再去前端目录找到vue cli 3.0的配置文件,这里有个坑就是,vue cli 3.0的已经没有config目录,配置文件需要手动添加,如果没有vue.config.js则要新建一个,更改为

module.exports = {
// 输出目录
assetsDir: 'static',
// 基本路径
// baseUrl: './',
};

这样用npm run build打包出来的dist文件里面就有static目录了

最后是文件的调用,目前只能调用static里面的文件,如果有其他资源文件放在public里面的话需要转移到assets目录里面,这样在打包的时候才会被打进static目录。

(在public里面的资源文件是不会被webpack打包的,而是会被直接复制到dist目录里面,最后会出现调用不掉静态资源的问题。所以最好把mp3.png之类的静态资源放到assets目录)

Django + Vue cli 3.0 访问静态资源问题的更多相关文章

  1. Vue Cli 3 打包上线 静态资源404问题解决方案

    报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...

  2. django 不能访问静态资源的解决办法

    最近在中文win10下使用python的django搭建web测试服务器,发现一个诡异的现象,正常配置好django的模型,视图和模板, 1.setting.py内容如下: ""& ...

  3. django 访问静态资源

    urlpatterns = patterns('', url(r'^$', views.show, name='index'), url(r'^static/(?P<path>.*)', ...

  4. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  5. spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js...

    问题:spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js... web.x ...

  6. SpringMVC访问静态资源的三种方式(转)

    本文转自:http://www.iigrowing.cn/springmvc_fang_wen_jing_tai_zi_yuan_de_san_zhong_fang_shi.html 如何你的Disp ...

  7. SpringMVC访问静态资源

    SpringMVC访问静态资源 在SpringMVC中常用的就是Controller与View.但是我们常常会需要访问静态资源,如html,js,css,image等. 默认的访问的URL都会被Dis ...

  8. nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!

    直接打开html文件,是以file:///方式打开的,这种方式很多时候会遇到跨域的问题,因此我们一般会搭建一个简易的本地服务器,来运行测试页面. 一.构建静态服务器 1.使用express模块 建立个 ...

  9. 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

    在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...

随机推荐

  1. Spring Boot2.0之 jar打包方式

    Jar类型打包方式 1.使用mvn celan  package 打包 2.使用java –jar 包名 war类型打包方式 1.使用mvn celan package 打包 2.使用java –ja ...

  2. Linux学习之路(一)命令基本格式

    据统计Linxu里面能够识别的命令超过3000个,而我们常用的Linux基本命令在60个左右.常用命令是我们必须掌握的命令,需要我们多练习才能记住,最起码要敲3遍以上. 简单的把常用命令分为以下几大类 ...

  3. html5--2.4新的布局元素(3)-section

    html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...

  4. fiddler篡改请求数据

    有时需要修改请求或返回结果来验证网站存在的漏洞,因此需要使用到fiddler的断点功能. 如何修改请求前数据? 1.设置请求前断点 Rules--Automatic breakpoints--befo ...

  5. 相对路径转绝对路径C++实现

    #include<iostream> #include<string> #include<vector> using namespace std; //相对路径转绝 ...

  6. dataguard 下主备 online redo 与 standby redo log resize 重建

    环境说明: 本实验环境是一个节点的rac + 单节点 asm dg     database 与 grid 版本是 11.2.0.4 .提别提醒 如果是多节点集群,操作时需要特别注意 thread . ...

  7. JQuery Mobile+cordova构建一个Android项目

    1.安装Android开发环境     Android开发环境的安装,现在主要是由于不能访问谷歌站点,在windows下在host文件中添加一个对应的74.125.195.190 dl-ssl.goo ...

  8. SQL 优化总结(三) SQL子句

    SQL子句 尽可能编写优化器可以优化的语句. 1. SELECT子句 (1) 在查询Select语句中用Where字句限制返回的行数,避免表扫描,如果返回不必要的数据,浪费了服务器的I/O资源,加重了 ...

  9. ASP.Net MVC实现一个表单多个submit

    1. 用Html.BeginForm(ActionName,ControllerName,Post)来实现controller-action的路由, 2. Form里的每个input的name值统一, ...

  10. Spring 3.1新特性之三:Spring支持Servlet 3.0(待补充)

    高效并发是JDK 1.6的一个重要主题,HotSpot虚拟机开发团队在这个版本上花费了大量的精力去实现各种锁优化技术,如适应性自旋(Adaptive Spinning).锁削除(Lock Elimin ...