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 ...
随机推荐
- [Luogu] 计算系数
https://www.luogu.org/problemnew/show/P1313#sub Answer = a ^ n * b ^ m * C(k, min(n, m)) 这里用费马小定理求逆 ...
- Codevs 1169 传纸条 2008年NOIP全国联赛提高组
1169 传纸条 2008年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 小渊和小轩是好朋友也是同班 ...
- linux 搭建 jenkins 前端自动构建时,老是提示 sh: vue-cli-service: command not found
如题. 在 shell 里面执行 env 发现一个 NODE_ENV=production 的环境变量,是这个东西的原因. 通过 unset NODE_ENV 命令去掉这个环境变量就可以了 ...
- python定时任务-sched模块
通过sched模块可以实现通过自定义时间,自定义函数,自定义优先级来执行函数. schedule = sched.scheduler( time.time,time.sleep) schedule是一 ...
- BOM:浏览器对象
1.window是javascript的顶级对象 window有很多内置方法 如 alert open 自定义函数 2.window是bom的顶级对象,通常情况下,可以省略 window ...
- linux查看当前目录
查看当前路径命令:pwd pwd命令能够显示当前所处的路径. 这个命令比较简单,如果有时在操作过程中忘记了当前的路径,则可以通过此命令来查看路径,其执行方式为:
- redis事务机制和分布式锁
Redis事务机制 严格意义来讲,Redis的事务和我们理解的传统数据库(如mysql)的事务是不一样的:Redis的事务实质上是命令的集合,在一个事务中要么所有命令都被执行,要么所有事物都不执行. ...
- mysql zip方式安装
下载zip文件解压到安装目录,此时是没有data文件夹和my.ini文件的. 1.首先自己新建my.ini,内容如下: [client] port=3306 default-character-set ...
- BOM问题
在php编写中,很多人喜欢用notepad editplus 等等在windows下编写程序, 这就很容易出现一个问题,那就是文件签名的东西--BOM!所谓BOM,全称是Byte Order Mark ...
- android data binding jetpack VIIII 第一坑
<LinearLayout android:id="@+id/ll_item_home_page_pics" android:layout_width="wrap_ ...