同一 index.html 线上线下自动引入不同版本 css 和 js。

[happyjohann]

Summary about responses:

.htaccess on local machine

vim /etc/apache2/httpd.conf

RewriteEngine on

RewriteRule ^(.*presentations/)(assets/)(.*)$ $1~$2$3 [L,QSA,NC]

sudo /usr/sbin/apachectl restart

And that works great for me.

Local Machine Dependent.

Other Options

Webpack

with replace add-on

if clause

if (module.hot) {
// dev code
}

with two env

It should be one good practice. However, personally speaking, I have no enough knowledge about this methods. [TODO:]

Gulp with two build tasks

It should also be one good practice. However, personally speaking, I have no enough knowledge about this methods. [TODO:]

symbolic link from script.js to ~script.js on VPS

Server Dependent

Nginx sub_filter rewrite on VPS

location / {
  sub_filter '/presentations/assets/' '/presentations/~assets/';
  sub_filter_once off;
}

Or more advanced configuration employing regex match and replace, see https://www.nginx.com/resources/wiki/modules/substitutions/ for nginx_substitutions_filter.

Server Dependent.

Front-end JS window.location.host Based Loading

Domain Dependent.

So called load.js method (?)

I guess it is the same as above window.location.host based method.

Domain Dependent

If this detect the existence of /~assets/ first and if not then load /assets/, the could be the perfect solution.

However, no idea how to implement this.

Switch hosts

I understand this as two absolutely different sites, not sharing the same index.html

Local Machine Dependent

Summary about responses and further handling can also be accessed via this link: Including Different css and js Files for Development and Deployment Environment by the Same index.html without Error.

[ericls]

通过环境变量配合 webpack 的 replace 插件

[fucker]

我有办法

[spritevan]

if (module.hot) {
// dev code
}

[justyy]

楼主 字写得很漂亮

[lwbjing]

@justyy https://www.zhihu.com/question/26854003

[naomhan]

感觉最简单的就是 switchhosts 了 代码都不要改 线上内网各布一套

[ragnaroks]

index 硬是看成了 mdx,
纯前端的情况下,可能得依靠一个 load.js 来做判断了

[learnshare]

Gulp 写两个编译任务

[airyland]

需求不复杂，用 webpack 可破，两个 env 不同配置即可，开发时 dev 配置一套，要上线构建时另一套。

[happyjohann]

@ericls 能给个教程链接不？我对前端开发工具还不熟悉。

[happyjohann]

@spritevan 这个是用在什么环境下的，纯前端应该没办法直接用未定义的 module 吧，能解释一下么？

[happyjohann]

@justyy 这并不是重点，想法来了，所以就胡乱写了

[happyjohann]

@ragnaroks load.js 具体内容如何写，能赐教不？谢谢

[happyjohann]

@learnshare 有参考教程不？谢谢

[happyjohann]

@airyland 能给个参考教程不？对这个工具还不熟。谢谢

[ragnaroks]

假设你线下是 localhost,那 host 就会是 http://localhost/xxxx,线上是 http://domain.com/xxx
直接判断一下就在 js 里面加载不同的资源

[spritevan]

@happyjohann module.hot 是和 @airyland 一样依靠 webpack
差异在于他通过不同的配置文件来配置构建流程
module.hot 是用来判断是否开启热更新的状态，通常等价于测试环境 ;-)

原理很简单，也可以通过声明其他环境变量(比如检测域名)来标识开发／生产环境

[jarlyyn]

nginx 做个 sub_filter 就能搞定的事情。

怎么这么复杂了。

[happyjohann]

@ragnaroks 我本地用的是 project.static.domain 类似的 URL ，不想写成 URL based ， case based 代码。谢谢建议啊😄

[happyjohann]

@spritevan 嗯，和通过 module 判断是前端还是 node 的通用库一样。谢谢。看来又要学新东西了， webpack 之前只听说没用过

[happyjohann]

@jarlyyn 你这个方案我比较喜欢啊。能告知一下 fileter 具体怎么写么？谢谢

[jarlyyn]

前端挂个 nginx 反代

加一行

location /
{
sub_filter '/skin/production' '/skin/development;
sub_filter_once off;
}

不久好了么。

[happyjohann]

@fucker 愿闻其详

[happyjohann]

@jarlyyn 不错，谢谢。 sub_filter 是字串替换吗？我在想用正则去掉如例子所示的~😄

[jarlyyn]

@happyjohann

你把开发和生产的直接分两个目录不久好了……

sub_filter 是字符串替换

要正则的话就要用到

nginx_substitutions_filter 这个库了

https://www.nginx.com/resources/wiki/modules/substitutions/

[learnshare]

@happyjohann https://www.google.com/#newwindow=1&q=gulp

[happyjohann]

@jarlyyn 其实是在构建自己的最佳实践框架，放不同目录的问题是修改代码的时候需要切换文件夹。不过谢谢建议，准备采用两文件夹结构了，毕竟看起来更清爽。

[happyjohann]

@learnshare 这个 Google 链接就和我自己找一样了。对 gulp 不熟悉所以重点是不知道两个编译任务相关如何构建，甚至都不知道合适关键词，也不具备搜索结果筛选能力😭

[jarlyyn]

@happyjohann

这是最简单的方法啊。

还有个直接的方法就是把 config.js 做一个 alias

指向 config.js 指向 config.develop.js

相关的配置文件放里面

[happyjohann]

@jarlyyn 哈哈哈，看来你的配置方法用的比较灵活啊。不过问题是不太具备可移植性。只能在你的机器（服务器或者本地机器），别人的机器没有配置同样的 nginx 配置或者 symbolic link 就搞不定了啊

[shengchao]

提供一个方案， js 判断 window.location.host 是什么，动态给 index.html 插入 css 和 js 标签。

[deleted]

模板里写个 if 可行？

[happyjohann]

@deleted 有思路怎么写吗？

[happyjohann]

My own solution:

Since Apache is shipped with macOS, so personally I use Apache for development and Nginx for production.

And my apache configuration (the psudo-one since i am using this rule for just one subfolder) is as following:

```apache
RewriteEngine on

RewriteRule ^(.*)(assets/)(.*)$ $1~$2$3 [L,QSA,NC]
```

Sorry for English, currently Chinese input is broken.

[deleted]

@happyjohann 秀英语

[happyjohann]

@deleted 人不在国内呀，用学校的电脑是没有中文输入法的

[cctrv]

.htcaccess 是一個方案。
開發機配置 hosts 也是一個方案。