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

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.