用create-react-app脚手架搭建的react项目 使用 npm run build 之后生成的打包文件只能在根目录访问 这样放在服务器目录就访问不到了

报错为:

手动更改index.html的路径之后又报静态资源引入错误

把 

改为

这时候报错为:

解决方法很简单:

找到myapp目录config文件夹下面  paths.js

大约在37行左右  (这是在2017-12-23新建的react项目生产的配置文件)

修改为以下代码

function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
  envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
  return ensureSlash(servedUrl, true);
}

函数圈住是修改路径

END

react.js - 基于create-react-app的打包后文件根路径修改的更多相关文章

  1. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  2. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  3. webpack减少打包后文件体积的几种方法

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...

  4. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  5. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  6. .2-浅析webpack源码之打包后文件

    先不进源码,分析一下打包后的文件,来一张图: 首先创建两个JS文件,内容如下: // config.js module.exports = { entry: './input.js', output: ...

  7. 基于create-react-app的打包后文件路径问题

    改绝对路径为相对路径. https://segmentfault.com/q/1010000009672497直接在package.json里加 "homepage":" ...

  8. 如何修改Vue打包后文件的接口地址配置

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...

  9. 解决Vue打包后背景图片路径错误问题

    1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...

随机推荐

  1. shell编程下 特殊变量、test / [ ]判断、循环、脚本排错

    第1章 shell中的特殊变量 1.1 $# $# 表示参数的个数 1.1.1 [示例]脚本内容 [root@znix ~]# cat /server/scripts/show2.sh #!/bin/ ...

  2. 浅谈MES系统SMT的JIT功能(一):JIT原理

    前段时间帮忙客户实现了MES系统的SMT线上的JIT功能(JIT功能只适合电子行业的生产线),今天就来谈谈JIT功能是什么,为什么工厂车间需要用到JIT等等一些经验 首先说说JIT: 准时制生产方式( ...

  3. JSON、JSONP、Ajax的区别

    什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...

  4. 常见的XSS攻击代码

    第一类: <tag on*=*/> 在html标签事件中触发,典型的是on*事件,但是这种触发模式的缺陷在于不能直接触发所以更多的需要配合使用. eg: 1.使html元素占据整个显示页面 ...

  5. Jumpserver部署与安装

    jumpserver特点: 完全开源,GPL授权 Python编写,容易再次开发 实现了跳板机基本功能,认证.授权.审计 集成了Ansible,批量命令等 支持WebTerminal Bootstra ...

  6. SQL Server分组查询某最大值的整条数据(包含linq写法)

    想实现如下效果,就是分组后时间最大的那一条数据: 1.SQL SELECT * FROM ( SELECT * , ROW_NUMBER() OVER ( PARTITION BY RIP_GUID ...

  7. PHP实现前台页面与MySQL的数据绑定、同步更新

    今天我来给大家介绍一个PHP-MySQL的小项目. 使用 PHP和前台Ajax 实现在前台对MySQL数据库中数据的增.删等操作语句功能. 如果有问题,欢迎拍砖~ 首先,我们先做好前台HTML.CSS ...

  8. 3Sum探讨(Java)

    探讨一下leetcode上的3Sum: Given an array S of n integers, are there elements a, b, c in S such that a + b  ...

  9. java中自动装箱带来的性能问题

    之前没有特别注意自动封装所带来的性能问题,今天看了effective java,实验了一下,结果大吃一惊: 考虑下面这段代码: public static void main(String args[ ...

  10. webStorm恢复误删除文件或工程

    背景: 提交git时可能由于没有提交所有文件,不知什么原因导致最近几天所写文件全部消失,所改文件全部恢复到以前.最终通过webstorm找回项目.下面总结通过webstorm找回误删文件,或恢复到历史 ...