關於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/[email protected]/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
地址是這個 點選這個