在工作当中,我使用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文件不放在服务器的根目录下的更多相关文章

  1. vue项目打包,生成dist文件夹,如何修改文件夹的名字

    vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...

  2. vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)

    1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...

  3. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  4. Eclipse中的工程引入jar包后没有整合到一个文件夹而是全部在根目录下显示

    Eclipse中的工程引入jar包后没有整合到一个文件夹而是全部在根目录下显示 解决方案: 1,在Eclipse中,点击window-->Preferences-->Java-->B ...

  5. 用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载

    用java写一个servlet,可以将放在tomcat项目根目录下的文件进行下载,将一个完整的项目进行展示,主要有以下几个部分: 1.servlet部分   Export 2.工具类:TxtFileU ...

  6. vue中打包后vendor文件包过大

    vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把 ...

  7. vue中打包生成可配置文件以便修改接口地址

    vue打包上传到服务器之后,如果数据接口域名发生变化,需要手动修改接口地址,在发布的时候也麻烦,于是.. 在打包之后如果有一个json配置文件以便修改那不是方便很多 在网上找了一些方法貌似都是异步请求 ...

  8. 把app(apk和ipa文件)安装包放在服务器上供用户下方法

    怎么把app(apk和ipa文件)安装包放在服务器上供用户下载? IIS服务器网站不能下载.apk文件的原因:IIS的默认MIME类型中没有.apk文件,所以无法下载.解决办法:给.apk格式文件添加 ...

  9. CustomEditor的文件要放在Assets/Editor目录下

    using UnityEditor; using UnityEngine; [CustomEditor(typeof(test))] public class testEditor : Editor ...

随机推荐

  1. [Luogu] 计算系数

    https://www.luogu.org/problemnew/show/P1313#sub Answer = a ^ n * b ^ m * C(k, min(n,  m)) 这里用费马小定理求逆 ...

  2. Codevs 1169 传纸条 2008年NOIP全国联赛提高组

    1169 传纸条 2008年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 小渊和小轩是好朋友也是同班 ...

  3. linux 搭建 jenkins 前端自动构建时,老是提示 sh: vue-cli-service: command not found

    如题. 在 shell 里面执行  env 发现一个   NODE_ENV=production  的环境变量,是这个东西的原因. 通过  unset NODE_ENV  命令去掉这个环境变量就可以了 ...

  4. python定时任务-sched模块

    通过sched模块可以实现通过自定义时间,自定义函数,自定义优先级来执行函数. schedule = sched.scheduler( time.time,time.sleep) schedule是一 ...

  5. BOM:浏览器对象

    1.window是javascript的顶级对象        window有很多内置方法 如 alert open 自定义函数 2.window是bom的顶级对象,通常情况下,可以省略 window ...

  6. linux查看当前目录

    查看当前路径命令:pwd pwd命令能够显示当前所处的路径. 这个命令比较简单,如果有时在操作过程中忘记了当前的路径,则可以通过此命令来查看路径,其执行方式为:

  7. redis事务机制和分布式锁

    Redis事务机制 严格意义来讲,Redis的事务和我们理解的传统数据库(如mysql)的事务是不一样的:Redis的事务实质上是命令的集合,在一个事务中要么所有命令都被执行,要么所有事物都不执行.  ...

  8. mysql zip方式安装

    下载zip文件解压到安装目录,此时是没有data文件夹和my.ini文件的. 1.首先自己新建my.ini,内容如下: [client] port=3306 default-character-set ...

  9. BOM问题

    在php编写中,很多人喜欢用notepad editplus 等等在windows下编写程序, 这就很容易出现一个问题,那就是文件签名的东西--BOM!所谓BOM,全称是Byte Order Mark ...

  10. android data binding jetpack VIIII 第一坑

    <LinearLayout android:id="@+id/ll_item_home_page_pics" android:layout_width="wrap_ ...