vite build vue3项目配置开启sourcemap方式

柳枝

在Vue 3项目中，配置Sourcemap主要取决于你使用的构建工具，通常是

1. Vue CLI

复制代码

或者

1. Vite

复制代码

。
下面是在这两种情况下如何开启Sourcemap的步骤：

Vue CLI

对于使用

1. Vue CLI

复制代码

创建的项目，可以在项目的

1. vue.config.js

复制代码

文件中配置：

• 1.找到或者在项目根目录下创建一个
  1. vue.config.js

  复制代码
  文件。
  
• 2.修改或添加配置项以开启sourcemap。对于生产环境和开发环境，你可以分别配置：
  

1. module.exports = {
   
2.   configureWebpack: {
   
3.     devtool: 'source-map',
   
4.     // 为不同的环境设置不同的source-map
   
5.     productionSourceMap: true,
   
6.   }
   
7. }

复制代码

这个配置将会在开发环境和生产环境开启sourcemap。

Vite

如果你的项目使用的是

1. Vite

复制代码

，Vite 默认在开发模式下启用了sourcemap。
如果你需要控制sourcemap的生成，可以在

1. vite.config.js

复制代码

文件中进行设置：

• 1.找到或者在项目根目录下创建一个
  1. vite.config.js

  复制代码
  文件。
  
• 2.修改配置以控制sourcemap。例如，要在生产环境中启用sourcemap，可以进行如下配置：
  

1. import { defineConfig } from 'vite';
   
2. 
   
3. export default defineConfig({
   
4.   build: {
   
5.     sourcemap: true, // 或者使用 'inline' 等其他选项
   
6.   }
   
7. });

复制代码

这样配置后，无论是在开发环境还是在生产环境，sourcemap都会根据你的设置被生成。

注意

sourcemap可以帮助你进行错误的追踪和调试，但在生产环境中启用sourcemap可能会暴露源代码。
确保在你发布应用至生产环境时考虑到安全因素，需要根据实际情况判断是否开启sourcemap。

1. var code = “552ec044-e227-44d3-815b-e06c121c1563”

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322317bnb.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！