vue打包后jquery is not defined和静态资源路径找不到

解决jQuery未定义与路径问题

最新推荐文章于 2024-07-30 22:22:25 发布

原创最新推荐文章于 2024-07-30 22:22:25 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue

前端学习专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何解决Webpack项目中出现的'jQuery is not defined'错误及静态资源路径不可达的问题。通过调整配置文件，将jQuery加入全局变量并修改静态资源的公共路径为相对路径。

1、jquery is not defined:

解决：

webpack.prod.conf.js:

new webpack.DefinePlugin({
      'process.env': env,
      $ : 'jquery',
      jQuery : 'jquery'
    }),

改为：

new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
    }),

2、静态资源路径找不到

解决：

config > index.js:

build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    ...
}

改为：

build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    ...
}

把绝对路径改为相对路径