项目无法发布问题 -- vue is not defined

最新推荐文章于 2024-07-14 03:00:48 发布

输出是最好的学习方式

最新推荐文章于 2024-07-14 03:00:48 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： vue npm

本文链接：https://blog.csdn.net/weixin_38552195/article/details/118419254

版权

前端专栏收录该内容

36 篇文章 4 订阅

订阅专栏

在构建Vue项目时遇到页面报错，原因是项目未包含必要的依赖。原本项目作为工具类库上传到npm，依赖由使用方自行处理。为使项目独立运行，需在配置中取消externals部分对vue等库的排除，并在package.json中添加线上环境的依赖。通过修改webpack配置并更新package.json，确保项目内部包含所有必需的依赖，从而解决报错问题。

摘要由CSDN通过智能技术生成

在这里插入图片描述
在项目build之后，访问页面，报错，无法找到vue，查看配置发现如下

const path = require('path')
const NODE_ENV = process.env.NODE_ENV

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  lintOnSave: true,
  // 设为false打包时不生成.map文件
  productionSourceMap: false,
  // 修改 src 目录 为 examples 目录
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  configureWebpack: config => {
    console.log('NODE_ENV is :', NODE_ENV)
    if (NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.externals = {
        axios: 'axios',
        vue: 'vue',
        vueRouter: 'vue-router',
        vuex: 'vuex',
        moment: 'moment'
        // echarts: 'echarts',
        // 'echarts-liquidfill': 'echarts-liquidfill',
        // 'echarts-wordcloud': 'echarts-wordcloud'
      }
      config.performance = {
        hints: false
      }
    } else {
      // 为开发环境修改配置...
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@p', resolve('packages'))
      .set('@u', resolve('src/utils'))
      .set('@m', resolve('src/mixins'))
    // config.module
    //   .rule("js")
    //   .add('src')
    //   .add('/node_modules/')
    //   // .include.add("/packages")
    //   .end()
    //   .use("babel")
    //   .loader("babel-loader")
    //   options({
    //     presets: [
    //       ['@babel/preset-env', {
    //         modules: false
    //       }]
    //     ]
    //   });
  }
}

其中如下配置是webpack的相关配置，因为该项目最开始只是一个工具类项目，是要上传到npm中供各个项目使用的，而各个vue项目在构建的时候，是会自己安装需要的vue等包的，因此不需要在该项目中安装这些依赖。但如果要把这个项目作为一个单独的项目发布，则需要安装这些依赖。

config.externals = {
        axios: 'axios',
        vue: 'vue',
        vueRouter: 'vue-router',
        vuex: 'vuex',
        moment: 'moment'
        // echarts: 'echarts',
        // 'echarts-liquidfill': 'echarts-liquidfill',
        // 'echarts-wordcloud': 'echarts-wordcloud'
      }

在这里插入图片描述

解决办法

修改以上配置

config.externals = {
        // axios: 'axios',
        // vue: 'vue',
        // vueRouter: 'vue-router',
        // vuex: 'vuex',
        moment: 'moment'
        // echarts: 'echarts',
        // 'echarts-liquidfill': 'echarts-liquidfill',
        // 'echarts-wordcloud': 'echarts-wordcloud'
      }