当然有啦！不用手动修改路径的动态方案有好几种，完全可以根据你的项目技术栈来选，我给你列几个最常用的：

现在主流的构建工具都支持环境变量配置，能自动帮你切换资源路径，彻底告别手动修改：

• Webpack：通过DefinePlugin定义环境变量，在配置文件里区分开发/生产环境：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.PUBLIC_PATH': JSON.stringify(
        process.env.NODE_ENV === 'production' ? '' : '../../'
      )
    })
  ]
};

然后在HTML模板里直接用这个变量：

<script src="<%= process.env.PUBLIC_PATH %>js/file.js"></script>
<link rel="stylesheet" type="text/css" href="<%= process.env.PUBLIC_PATH %>css/file.css">

• Vite：配置更简单，直接在vite.config.js里设置base属性：

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? './' : '../../'
});

之后HTML里只需要写根相对路径，Vite会自动根据环境替换：

<script src="/js/file.js"></script>
<link rel="stylesheet" type="text/css" href="/css/file.css">

如果你的项目用到了模板引擎（比如EJS、Pug、Handlebars），可以直接在模板里加条件判断：
以EJS为例，先定义路径变量，再引入资源：

<% const publicPath = process.env.NODE_ENV === 'production' ? '' : '../../' %>
<script src="<%= publicPath %>js/file.js"></script>
<link rel="stylesheet" type="text/css" href="<%= publicPath %>css/file.css">

构建的时候工具会根据当前环境渲染出对应的HTML文件。

如果是后端渲染的项目（比如Node.js、PHP、Java），可以在后端判断环境，把路径变量传到前端页面：
比如Node.js + Express + EJS的写法：

app.get('/', (req, res) => {
  const isProduction = process.env.NODE_ENV === 'production';
  res.render('index', { publicPath: isProduction ? '' : '../../' });
});

然后在EJS模板里直接使用这个变量，和上面的模板引擎用法一致。

如果不想用构建工具或后端，也可以用JS动态创建资源标签，通过域名或其他标识判断环境：

// 比如通过域名区分开发/生产环境
const isProduction = window.location.hostname !== 'localhost';
const publicPath = isProduction ? '' : '../../';

// 动态加载JS
const script = document.createElement('script');
script.src = `${publicPath}js/file.js`;
document.body.appendChild(script);

// 动态加载CSS
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `${publicPath}css/file.css`;
document.head.appendChild(link);

这个方法适合小型静态项目，但不如构建工具的方案优雅。

内容的提问来源于stack exchange，提问作者Arslan Aslam