webpack从index.html中引入vue.min.js改为webpack引入vue包

youyudexiaowangzi

已于 2022-02-23 14:38:49 修改

阅读量727

点赞数

分类专栏： Vue 文章标签： vue.js javascript webpack

于 2021-01-05 16:25:50 首次发布

本文链接：https://blog.csdn.net/youyudexiaowangzi/article/details/112240963

版权

Vue 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

今天遇到一个页面加载不起来的问题，从网络请求的资源列表中看到，有几个资源请求了好久都没反应，通过项目中的index.html看到这几个文件是通过script的方式引入的，其他服务器上的资源都已经加载好了，就剩这几个了，于是就想把他们移除，直接编译打包到本地项目，但是项目现在处于维护阶段，也不是我创建的项目，于是只能小心摸索

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="-1">  
    <link rel="icon" href='./static/images/logo.png' type="image/x-icon"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>****</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </body>
</html>

但是把这3个script和一个link删除之后，报错：

ReferenceError: Vue is not defined

果然是项目中没有引入vue、element-ui的包，

于是执行了npm install vue@2.5.17把缺少的包都装上去，注意版本号，我加上@2.5.17是因为直接安装vue会报错

Vue packages version mismatch

然后还试着重新安装了vue-router, vue-cli虽然不知道是不是必须的

重新安装vue之后依然报错 ReferenceError: Vue is not defined，于是仔细对比了此项目，和自己用vue init创建的项目，发现在build/webpack.base.conf.js里面有少许差异，于是做了修改

  删掉
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
 },
 
 ===============================================
 
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  替换成
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@api': resolve('src/api'),
      'static': path.resolve(__dirname, '../static'),
    }
  },

这下好了，vue本身没问题了，但是又报element-ui组件识别不出来的错误，

再对比一下main.js，发现直接从script引用的element并没有执行Vue.use(ElementUI),加上这一行代码之后vue也正常了

虽然不知道一开始项目的创建者怎么把项目做成这个样子的，像是为了减轻服务器的压力，结果导致其他域名出现问题的时候，服务器的项目反而加载不了

也算是多了一次教训

youyudexiaowangzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack从index.html中引入vue.min.js改为webpack引入vue包

原项目是vue，在index.html中通过script的方式引入vue、element-ui等重要库。现将其改为通过npm install 的方式引入package
复制链接

扫一扫