vue中打包之后的dist文件不放在服务器的根目录下
在工作当中,我使用webpack打包的dist,由于管理的问题,无法被放在服务器根目录下 ,但在目前的vue配置,dist不放在根目录下,访问页面会成为一片空白,于是便要对vue框架的config进行配置修改。
首先对vue中config文件夹的index.js做配置,将build.assetsPublicPath由绝对路径改为相对路径
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //原本默认为 / 改为 ./相对路径 }
这样就可以放在其他目录下访问了!
然后还会出现一个问题,dist打包的图片在服务器上可能出现无法访问的情况,这种情况多数是因为图片路径不对,所以我们还需要对vue的build文件下的utils.js做修改,将generateLoaders方法中判断options.extract的return中添加 publicPath:'../../',请注意publicPath的../,与你后端所放dist的层级有关。
function generateLoaders (loader, loaderOptions) {
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../' //这个../与dist所在层级有关
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
vue中打包之后的dist文件不放在服务器的根目录下的更多相关文章
- vue项目打包,生成dist文件夹,如何修改文件夹的名字
vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...
- vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)
1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- Eclipse中的工程引入jar包后没有整合到一个文件夹而是全部在根目录下显示
Eclipse中的工程引入jar包后没有整合到一个文件夹而是全部在根目录下显示 解决方案: 1,在Eclipse中,点击window-->Preferences-->Java-->B ...
- 用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载
用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载,将一个完整的项目进行展示,主要有以下几个部分: 1.servlet部分 Export 2.工具类:TxtFileU ...
- vue中打包后vendor文件包过大
vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把 ...
- vue中打包生成可配置文件以便修改接口地址
vue打包上传到服务器之后,如果数据接口域名发生变化,需要手动修改接口地址,在发布的时候也麻烦,于是.. 在打包之后如果有一个json配置文件以便修改那不是方便很多 在网上找了一些方法貌似都是异步请求 ...
- 把app(apk和ipa文件)安装包放在服务器上供用户下方法
怎么把app(apk和ipa文件)安装包放在服务器上供用户下载? IIS服务器网站不能下载.apk文件的原因:IIS的默认MIME类型中没有.apk文件,所以无法下载.解决办法:给.apk格式文件添加 ...
- CustomEditor的文件要放在Assets/Editor目录下
using UnityEditor; using UnityEngine; [CustomEditor(typeof(test))] public class testEditor : Editor ...
随机推荐
- JavaScript实现 简易 堆
有两个原始操作用于保证插入或删除节点以后堆是一个有效的最大堆或者最小堆: shiftUp(): 如果一个节点比它的父节点大(最大堆)或者小(最小堆),那么需要将它同父节点交换位置.这样是这个节点在数组 ...
- springboot的@Configuration文件读取static静态文件
错误 正确
- ueditor上粘贴从word中copy的图片和文字
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- Pap.er 模仿 - 第二天
最后更新:2017-12-19 在第一天中, 我们完成了项目的基本设置.隐藏Dock.显示和隐藏Popover等操作,接下来的这章中, Pap.er将会去搭建对应 UI. 一.设置Popover对应颜 ...
- 2016"百度之星" - 初赛(Astar Round2A)1006 Gym Class(HDU5695)——贪心+拓扑排序
分析:首先,利用贪心可知,如果要所有人的分数和最高,需要把序号大的优先放在前面.其次,对于a的前面不能为b,那么只能a在b前面了,那么就建立一条从a到b的边,并且b的入度加1.然后就是拓扑排序了.要分 ...
- java按某个字段对数据分组
import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; i ...
- 0ctf-ezdoor-复现分析
在学习opcache的时候,看到了这个题目,刚好有环境,就来复现一下,这个题目也让我学到了很多. 创建镜像: docker build -t 0ctf-ezdoor . 启动容器: docker ru ...
- Linux设备驱动程序 之 度量时间差
概述 内核通过定时器中断来跟踪事件流: 时钟中断由系统定时硬件以及周期性的间隔产生,这个间隔由内核根据HZ的值设定,HZ是一个细节结构有关的常数:作为一般性规则,即使知道对应平台上的确切HZ值,也不应 ...
- Ubuntu安装Redis及使用
NoSQL简介NoSQL,全名为Not Only SQL,指的是非关系型的数据库随着访问量的上升,网站的数据库性能出现了问题,于是nosql被设计出来 优点/缺点优点:高可扩展性分布式计算低成本架构的 ...
- <JavaScript>为什么0.1+0.2=0.30000000000000004
浮点数运算 你使用的语言并不烂,它能够做浮点数运算.计算机天生只能存储整数,因此它需要某种方法来表示小数.这种表示方式会带来某种程度的误差.这就是为什么往往 0.1 + 0.2 不等于 0.3. 为什 ...