我尝试在index.html 中引入自定义js，当时打包后发现，js中内容还是会被打包。请教一下有什么方法
引入js肯定要打包进去的，不打包就访问不了啊。 你用 cdn地址就会打包进去了 。或者设置忽略某个文件不让打包 。
webpack 的 externals
https://www.webpackjs.com/configuration/externals/#externals
webpack默认情况下不会将从CDN引入的JS文件打包进最终的输出文件中。Webpack会将从CDN引入的文件视为外部依赖，并在打包时跳过它们。这意味着这些文件不会被包含在最终的输出文件中，而是在运行时从外部获取。
在Webpack配置中使用externals选项可以实现这一点。通过将外部依赖的名称和全局变量绑定起来，Webpack会跳过这些文件的打包。你需要在HTML文件中手动引入这些外部依赖，以确保在运行时可用。
【以下回答由 GPT 生成】
对于Vue3的cli项目，你可以使用环境变量来实现动态修改配置文件的效果。
首先，在你的项目根目录下创建一个config文件夹，然后在该文件夹下创建一个config.js文件，作为你的配置文件。
在config.js中，定义你想要动态修改的配置项。例如：
module.exports = {
apiUrl: process.env.VUE_APP_API_URL || 'http://localhost:3000'
}
然后，在你的项目中使用这些配置项。例如，在Vue组件中：
import { apiUrl } from '@/config/config'
axios.get(apiUrl)
接下来，在你的项目根目录下创建一个.env文件，并在其中添加你想要配置的环境变量。例如：
VUE_APP_API_URL=http://api.example.com
这样，你就可以在打包后根据不同环境来动态修改配置文件的内容。
你可以使用以下命令进行打包，并在不同环境下加载不同的配置文件：
# 默认环境
npm run build
# 开发环境
npm run build -- --mode development
# 生产环境
npm run build -- --mode production
在打包后生成的dist文件夹中，会根据不同的环境生成不同的文件，如app.<hash>.js和app.<hash>.css。
你可以在index.html中引入这些文件，并根据不同的环境加载不同的配置文件。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script src="<%= BASE_URL %>app.js"></script>
<script>
if (process.env.NODE_ENV === 'development') {
// 开发环境加载开发配置
document.write('<script src="<%= BASE_URL %>config/config.dev.js"></script>')
} else {
// 生产环境加载生产配置
document.write('<script src="<%= BASE_URL %>config/config.prod.js"></script>')
}
</script>
</body>
</html>
这样，你就可以根据不同环境动态加载不同的配置文件，实现动态修改配置的效果。
以上就是使用环境变量来实现在Vue3的cli项目中抽离出一个配置文件并动态修改的解决方案。希望对你有帮助！如果还有其他问题，请随时提问。
【相关推荐】