Django + Vue cli 3.0 访问静态资源问题

【问题背景】

用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 访问静态资源问题的更多相关文章

Vue Cli 3 打包上线静态资源404问题解决方案
报错原因:静态资源丢失解决方案官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...
django 不能访问静态资源的解决办法
最近在中文win10下使用python的django搭建web测试服务器,发现一个诡异的现象,正常配置好django的模型,视图和模板, 1.setting.py内容如下: ""& ...
django 访问静态资源
urlpatterns = patterns('', url(r'^$', views.show, name='index'), url(r'^static/(?P<path>.*)', ...
Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
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 ...
SpringMVC访问静态资源的三种方式(转)
本文转自:http://www.iigrowing.cn/springmvc_fang_wen_jing_tai_zi_yuan_de_san_zhong_fang_shi.html 如何你的Disp ...
SpringMVC访问静态资源
SpringMVC访问静态资源在SpringMVC中常用的就是Controller与View.但是我们常常会需要访问静态资源,如html,js,css,image等. 默认的访问的URL都会被Dis ...
nodejs 构建本地web测试服务器以及解决访问静态资源的问题！
直接打开html文件,是以file:///方式打开的,这种方式很多时候会遇到跨域的问题,因此我们一般会搭建一个简易的本地服务器,来运行测试页面. 一.构建静态服务器 1.使用express模块建立个 ...
用node.js express设置路径后子路径下的页面访问静态资源路径出问题
在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...

随机推荐

Linux Shell Script目录
目录 Linux Shell基础开始Shell编程代码示例代码查看:https://github.com/Furzoom/demo-C/tree/master/src/shell
Appium——api常用函数
appium常用函数介绍: 获取页面信息: 1. def get_current_activity(cls, driver): ''' 获取当前页面的activity :param drive ...
Appium——元素定位
首先介绍两种定位元素的工具,appium自带的 Inspector 和 android SDK自带的 uiautomatorviewer 1.UIAutomator Viewer比较简单,在模拟器打开 ...
Linux tomcat安装详解
一.tomcat安装 1.下载JDK和Tomcat //通过wget下载 wget http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-8 ...
insert …select …带来的死锁问题
mysql中 insert …select …带来的问题当使用insert...select...进行记录的插入时,如果select的表是innodb类型的,不论insert的表是什么类型的表,都会 ...
leetcode 43. Multiply Strings(高精度乘法)
Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...
ACM学习历程—HDU1003 Max Sum（dp && 最大子序列和）
Description Given a sequence a[1],a[2],a[3]......a[n], your job is to calculate the max sum of a sub ...
【Lintcode】029.Interleaving String
题目: Given three strings: s1, s2, s3, determine whether s3 is formed by the interleaving of s1 and s2 ...
HL7 V2 分隔符
Delimiter Characters Character Purpose 0x0D Marks the end of each segment. | Composite delimiter. ^ ...
Python 查看本机WiFi密码
http://www.lijiejie.com/python-get-all-saved-wifi-passwords/ 很早以前我写过一个,丢了. 今天偶然看到这篇文章 , 也是很久以前写的,他用 ...

Django + Vue cli 3.0 访问静态资源问题

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

随机推荐

热门专题