uni-app的vue.config.js

先是之前一直使用hbuildx運行和發布。

根據項目需求，現已將其轉換為使用vue-cli。官網也是推薦使用該方式

hbuildx 互轉 vue-lic https://ask.dcloud.net.cn/article/35750

需要自己重新配置scss. 可查看下面scss的配置鏈接。

1. 關於編輯器的選擇

選擇哪種方式取決於：是否需要app打包，以及順手工具。

如果是app打包，則需要使用hbuildx。

coding的時候則用別的編輯器也可以。官方推薦使用vs

2. 關於webpack的配置

vue的webpack配置和之前的不一樣，vue-cli更改了很多，目前已經是4版本了。

1. 其中配置插件使用 https://cli.vuejs.org/zh/config/#chainwebpack

更具體可查 https://github.com/neutrinojs/webpack-chain 

2. 配置scss使用 https://cli.vuejs.org/zh/guide/css.html#css-modules

簡單配置方式1:

跟webpack的寫法一樣

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

簡單配置方式2:

函數返回值，里面可以條件判斷

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產環境修改配置...
    } else {
      // 為開發環境修改配置...
    }
  }
}

鏈式操作：

可以類比以前webpack設置的方式，這種寫法只不過換成鏈式操作而已。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue') 
      .use('vue-loader')
        .loader('vue-loader') 
        .tap(options => { // 設置處理的具體選項
          return options
        })
    
    config.module
      .rule('graphql') // 設置規則名稱
      .test(/\.graphql$/) // 設置篩選文件的規則
      .use('graphql-tag/loader')  // 使用處理文件的loader
        .loader('graphql-tag/loader') // 載入loader對文件進行處理
        .end()
      // 你還可以再添加一個 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

具體可以查看這里： https://github.com/neutrinojs/webpack-chain#getting-started

例子都講的很詳細了。