vue-cli打包问题

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

CurryChou777

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

阅读量1k

点赞数

分类专栏： vue 文章标签：源码 vue-js 打包

本文链接：https://blog.csdn.net/m0_37727560/article/details/79063842

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

关于npm run build打包问题

在项目中使用vue-cli脚手架搭，由于实际项目问题，与自定义安装的项目目录略有差异。

自定义安装的项目是：test => src => 源码

也就是在test项目下，安装node依赖，进入src下，是项目的源码部分。

然后实际项目部分是，test2 => src => vue1、vue2

在src目录下是真正的项目部分，其实就是在src的下面有多个vue-cli建立的项目，这样的好处是，多个项目可以共用一套依赖，不用安装多次。

但是在实际打包过程也会有一些问题，在相应目录下执行打包命令npm run build,有如下错误

这里写图片描述

类似的一些错误，上面是在引入的element-ui使用UglifyJs混淆时出了问题，之前还遇到的类似一个问题是在打包箭头函数等es6的内容时报错。这些错误都是一个原因，是在打包时转码es5不能识别。

解决办法

1
在项目build目录下的webpack.base.conf.js下

{
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['env']
        },
        include: [resolve('src'), resolve('test'), resolve('../../node-modules/.2.0.11@element-ui/src/mixins/emitter')]
      },

按照这种方式修改，就可以解决问题。其中resolve后面的路径是报错的文件路径，我的这个路径就是上图中的路径。每个人项目实际的路径不一样，一定要看仔细。切莫大意写错路径哦！

2
使用了支持压缩ES6的uglifyjs
在项目build目录下的webpack.prod.conf.js下

先在文件中引入：

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)

然后修改

plugins: [
    // new webpack.optimize.UglifyJsPlugin({
    //   compress: {
    //     warnings: false
    //   },
    //   sourceMap: true
    // }),
    new UglifyJsPlugin({
      test: /\.js($|\?)/i
    }),
]

别忘了先安装这个插件 npm i -D uglifyjs-webpack-plugin
地址是这个点击这个