Vue3构建后经Nginx反向代理遇CSP阻止eval错误求解

一、解决CSP阻止eval及资源加载404问题 #

1. 消除生产构建中的eval代码 #

Vite在生产环境构建时默认不会生成含eval的代码，若你的构建产物仍存在该问题，可按以下步骤排查：

• 确认使用yarn build命令构建生产包，而非开发环境的yarn dev：开发环境为了热模块替换（HMR）性能会使用eval，生产构建会自动移除这类逻辑。
• 排查第三方插件：部分Vite插件可能引入含eval的代码，可临时禁用插件定位问题。
• 明确指定构建模式：在vite.config.js中强制设置生产模式：

  export default defineConfig({
    mode: 'production',
    // 其他配置项
  })
  

2. 修复Nginx反向代理的404与CSP配置 #

• 404问题：针对Vue单页应用（SPA）的路由特性，调整Nginx配置，确保所有路由请求都指向index.html：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

  同时确认静态资源路径映射正确，Vite默认构建的资源存放在/assets/目录，需保证Nginx能正确访问dist文件夹下的对应文件。

• CSP规则优化：严格模式下无需添加unsafe-eval，可调整Nginx的CSP响应头，允许必要的资源加载：

  add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'";
  

  （注：unsafe-inline用于兼容Vue内联样式的加载，若项目所有样式都通过外部文件引入，可移除该规则）

二、如何使用vue.runtime.js #

Vue3的vue.runtime.js是仅包含运行时的轻量化版本（无模板编译器），Vite默认就会使用该版本——因为Vite会在构建阶段预编译所有.vue文件的模板，无需运行时编译能力。若需手动指定：

1. 在vite.config.js中配置别名指向runtime版本：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import path from 'path'
   
   export default defineConfig({
     plugins: [vue()],
     resolve: {
       alias: {
         'vue': path.resolve(__dirname, './node_modules/vue/dist/vue.runtime.esm-bundler.js')
       }
     }
   })
   

2. 注意：使用该版本后，代码中不能出现运行时编译场景（如直接通过字符串定义模板的app.component('demo', { template: '<div>...</div>' })），必须使用预编译的.vue文件。

三、为什么默认构建不符合常规内容安全策略 #

你遇到的eval问题本质是开发环境的特性限制：Vite在开发模式下为了实现快速热更新，会通过eval动态加载模块，这会触发严格CSP规则对unsafe-eval的限制。而生产环境构建后，Vite会将代码打包为静态文件，自动移除所有eval相关逻辑，默认是符合常规CSP要求的。

若生产构建后仍存在CSP问题，可能是以下原因：

• 第三方依赖中包含eval代码；
• Vite配置开启了某些动态代码生成特性（如部分特殊插件）。

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