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

例子都讲的很详细了。