vue 打包报错 npm run build

简介: npm run buildvue 打包报错WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

npm run build
vue 打包报错

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.filename: A relative path is expected. However the provided value "/static/js/[name].[chunkhash].js" is an absolute path!
   -> Specifies the name of each output file on disk. You must **not** specify an absolute path here! The `output.path` option determines the location on disk the files are written to, filename is used solely for naming the individual files.
   Please use output.path to specify absolute path and output.filename for the file name.
    at webpack (/Users/apple/Desktop/demo/dr-admin/node_modules/webpack/lib/webpack.js:19:9)
    at err (/Users/apple/Desktop/demo/dr-admin/build/build.js:19:3)
    at next (/Users/apple/Desktop/demo/dr-admin/node_modules/rimraf/rimraf.js:75:7)
    at CB (/Users/apple/Desktop/demo/dr-admin/node_modules/rimraf/rimraf.js:111:9)
    at /Users/apple/Desktop/demo/dr-admin/node_modules/rimraf/rimraf.js:137:14
    at FSReqWrap.oncomplete (fs.js:153:21)

-configuration.output.filename:应为相对路径。但是提供的值“/static/js/[name].[chunkhash].js”是绝对路径!

找到 config/index.js 里面的 assetsSubDirectory: '/static'是否绝对路径,除了 index.html 之外的静态资源要存放的路径,这里改为相对路径

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/sub/',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
目录
相关文章
|
6天前
|
网络安全 计算机视觉
【node】 npm install 报错:code 128
【node】 npm install 报错:code 128
25 1
|
10天前
|
JavaScript
vue3 使用element plus 打包时 报错
vue3 使用element plus 打包时 报错
18 0
|
1月前
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
34 1
|
2月前
|
JavaScript 前端开发
总结 Vue3 的一些知识点:Vue3 项目打包
总结 Vue3 的一些知识点:Vue3 项目打包
|
1天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
1月前
|
缓存 网络虚拟化
解决 npm install 报错的常见问题
解决 npm install 报错的常见问题
142 0
|
1月前
|
JavaScript 网络安全 数据安全/隐私保护
【问题:创建Vue项目】npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR!
【问题:创建Vue项目】npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR!
|
1月前
|
JavaScript 前端开发
总结 Vue3 的一些知识点:Vue3 项目打包
总结 Vue3 的一些知识点:Vue3 项目打包
|
2月前
|
前端开发 JavaScript API
极简运行Vue打包文件:让你的网页快速启动,高效展现!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
2月前
|
JavaScript
报错:npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
报错:npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

推荐镜像

更多