「Vue實踐」項目升級vue-cli3的正確姿式

時間 2019-11-05

標籤 vue 實踐項目升級 cli3 cli 正確简体版

原文原文鏈接

一. 原覺得升級vue-cli3的路線是這樣的：

建立vue-cli3項目，按原有項目的配置選好各項配置
遷移目錄

src->src
static->public
複製代碼

對比新舊 package.json，而後yarn install，完畢。

然鵝... 運行項目，報錯`You are using the runtime-only build of Vue......`：

而後去查了下舊項目的相關字眼文件：css

噢，原來是vue-cli3的webpack相關文件都得本身寫。因而乎根據官網的指引，在根目錄建立了vue.config.jshtml

此時粗略配置：vue

chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = false
        return options
      })
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
  }
複製代碼

二. 此時勉強能跑起來，但後續遇到了這些坑：

`#1` public 靜態資源不加載

```
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 // ....
 // 確保靜態資源
 config.resolve.extensions = ['.js', '.vue', '.json', '.css']
 config.plugins.push(
  new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
)
```
複製代碼

`#2` Chrome 查看樣式時沒法找到源文件

緣由： vue-cli3 裏默認關閉 sourceMap，樣式都會被打包到首頁。解決: 須要本身配置打開

// 讓樣式找到源
  css: {
    sourceMap: true
  },
複製代碼

`#3` 生產環境的`debuger`和`console`沒法經過 `uglifyjs-webpack-plugin` 和 `uglify-es` 剔除

緣由：不支持es6, 須要配置babel(uglify-es按配置填會顯示不存在選項)node

解決：插件terserwebpack

```
const TerserPlugin = require('terser-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
  // 爲生產環境修改配置...
  new TerserPlugin({
    cache: true,
    parallel: true,
    sourceMap: true, // Must be set to true if using source-maps in production
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  })
} else {
  // 爲開發環境修改配置...
}
```
複製代碼

`#4` 沒法在`config`目錄下配置不一樣環境的`API_URL`，用於跨域請求

緣由：vue-cli3 中須要遵循變量規則，使用VUE_APP前綴git

官方規則：在客戶端側代碼中使用環境變量es6

解決：因而你須要建立以下幾個文件：github

.local也能夠加在指定模式的環境文件上，好比 .env.development.local將會在 development 模式下被載入，且被 git 忽略。web

文件內容：vue-cli

// env.development.local
NODE_ENV = development
VUE_APP_URL = http://xxx.x.xxx/
複製代碼

`#5` vue-cli代理轉發控制檯反覆打印`"WebSocket connection to'ws://localhost..."`

解決方法：

vue.config.js中配置devServer.proxy的ws爲false

結合上述兩步，相對應的vue.config.js，須要這麼寫：

const env = process.env.NODE_ENV
let target = process.env.VUE_APP_URL

const devProxy = ['/api', '/']  // 代理
// 生成代理配置對象
let proxyObj = {};
devProxy.forEach((value, index) => {
  proxyObj[value] = {
    ws: false,
    target: target,
    // 開啓代理：在本地會建立一個虛擬服務端，而後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
    changeOrigin: true,
    pathRewrite: {
      [`^${value}`]: value
    }
  };
})
// ....
devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  }
複製代碼

最後貼上個人`vue.config.js`：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

const path = require('path')
const env = process.env.NODE_ENV
let target = process.env.VUE_APP_URL

const devProxy = ['/api', '/']  // 代理

// 生成代理配置對象
let proxyObj = {};
devProxy.forEach((value, index) => {
  proxyObj[value] = {
    ws: false,
    target: target,
    // 開啓代理：在本地會建立一個虛擬服務端，而後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
    changeOrigin: true,
    pathRewrite: {
      [`^${value}`]: value
    }
  };
})

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: '/',
  // 讓樣式找到源
  css: {
    sourceMap: true
  },
  configureWebpack: config => {
    // 確保靜態資源
    config.resolve.extensions = ['.js', '.vue', '.json', '.css']
    config.plugins.push(
      new CopyWebpackPlugin([{ from: 'public/', to: 'public' }]),
    )
    if (process.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true
          }
        }
      })
    } else {
      // 爲開發環境修改配置...
    }

  },
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = false
        return options
      })
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
  },
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    proxy: proxyObj
  }
}
複製代碼

三. Eslint相關報錯及配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'generator-star-spacing': 'off',
    'object-curly-spacing': 'off',
    // 最常出現的錯誤
    'no-unused-vars': 'off',
    // 最常出現的錯誤
    "vue/no-use-v-if-with-v-for": ["error", {
      "allowUsingIterationVar": true
    }],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}
複製代碼