想问提下create-react-app路径方面的问题

Question

创建了create-react-app文件之后，在根目录的/public/index.html中得到了

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

这样的代码，然后我想查找PUBLIC_URL的来源，在/config/path.js里面发现了这样一段代码：

const envPublicUrl = process.env.PUBLIC_URL;

也就是说它是挂在环境变量上的

但我没有发现更多的线索了，通过查看API我大致了解了有关/public文件夹下的文件导入项目的原理，但还是非常疑惑

这里但PUBLIC_URL是通过什么方式就进入了环境变量呢？或者说是怎么得到的？

在config/paths文件夹下，修改了

function getServedPath(appPackageJson) {

  const publicUrl = getPublicUrl(appPackageJson);

  const servedUrl =

    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');

  return ensureSlash(servedUrl, true);

}

修改快pathname可以修改servedUrl，从而原本静态文件的读取路径，但这个时候我发现PUBLIC_URL也同样发生了改变，这又是为什么？

恳请老师解答，谢谢

Answer 1

Parry 2017-08-19 21:30:22

定义的源码在这里：https://github.com/facebookincubator/create-react-app/blob/78dbf7bf2b50a35c426e5dbbfdf20ef1afcd8789/packages/react-scripts/template/src/registerServiceWorker.js#L24

你的问题是不能配置还是配置后发现编译出来的不正确了？

• 提问者 mylovef #1

  谢谢老师回答，编译没有问题的，我主要的疑惑是，您贴的这段代码const publicUrl = new URL(process.env.PUBLIC_URL, window.location)，里面那个process.env.PUBLIC_URL是怎么设置的？我eject之后翻看了整个源码只发现了webpack.config.dev.js引用了env中的getClientEnvironment(publicUrl)这里对开发环境的环境变量做了设置
  但是生产环境里面我没有看到类似设置的地方，那如果直接build，我们怎么得到您贴的代码里面的参数process.env.PUBLIC_URL呢

• Parry 回复 提问者 mylovef #2

  明白的你疑问了，你是说设置吧。
  默认是 public 文件夹。
  你可以通过
   第一种方式：通过命令行的方式临时的添加环境变量
          set PUBLIC_URL = folder_name && npm start
      第二种方式：将环境变量定义在.env文件中
          在项目根目录中创建.env文件，在里面定义变量 PUBLIC_URL=folder_name

• 提问者 mylovef #3

  非常感谢！