vue-cli4项目初始配置及优化（一）

        其实一直想着写一个vue初始配置模板，这样以后每次写新项目的时候就不用重复做这些事情了，但因为种种原因一直没去做这件事（主要是还是因为懒😊），最近有蛮多空闲，就开始写这个，也想去做一些早就想做的事情，像是学习react，ts之类的。
        当然，这里都是我长久以来个人创建项目时的一些习惯和想法，公司里也没有什么前辈让我参考学习什么的，就我一个一年的前端是最久的了，所以如果有什么更好的结构或是优化建议请务必评论或是私聊我，我会虚心学习的，非常感谢。
1.创建项目

2.调整目录结构

这个没什么好讲的，vue脚手架安装其实在创建的时候就把项目大致的结构帮你定好了，当然如果要作为一个比较规范的项目正式开始开发的话，还缺少一点东西，像是api的封装啊，utils文件夹里面存放公用方法啊之类的。上图是我已经加入了一些东西之后的目录，所以里面有reset.scss之类的一些东西，之后都会提到。
3.引入全局scss
在assets中创建scss文件夹，reset为重置页面样式，global为全局可复用变量或是样式mixin，frame引入上述两个scss，里面可以写一些公用样式之类的，当然也可以写一个scss存所有公用的东西，只是我喜欢分的比较开。
reset样式用的是normalize.css，支持npm安装
frame.scss：

@import "./reset.scss";
@import "./global.scss";

然后，在vue.config.js里面引入，请不要再App.vue等地方引用，不生效的。

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = 'production'.includes(process.env.NODE_ENV)


module.exports = {
  publicPath: '/',
  outputDir: process.env.outputDir || 'dist',
  assetsDir: 'assets',
  lintOnSave: false,
  productionSourceMap: !IS_PROD,
  parallel: require('os').cpus().length > 1,
  pwa: {}, // PWA 插件
  pluginOptions: {}, // 第三方插件
  css: {
    extract: IS_PROD, // css分离,与HMR不兼容
    sourceMap: !IS_PROD,
    loaderOptions: {
      sass: {
        // 引入全局样式
        prependData: '@import "@a/scss/frame.scss";'
      }
    },
    requireModuleExtension: true
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@a', resolve('src/assets'))
      .set('@c', resolve('src/components'))
      .set('@v', resolve('src/views'))
  },
}

4.搭建开发环境
在项目根目录下创建.env，.env.debug，.env.production三个文件，不清楚可以看第一步的项目结构。
.env：

NODE_ENV = "development"

BASE_URL = "./"

VUE_APP_API = "http://localhost:8080/api"

VUE_APP_PUBLIC_PATH = "./"

.env.debug：

NODE_ENV = "production"

BASE_URL = "./"

VUE_APP_API = "http://localhost:8081/api"

VUE_APP_PUBLIC_PATH = "./"



ACCESS_KEY_ID = "xxxxxxxxxxxxx"

ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"

REGION = "oss-cn-hangzhou"

BUCKET = "test"

PREFIX = "test-blog"

  

IS_ANALYZE = true;

.env.production：

NODE_ENV = "production"

BASE_URL = "./"

VUE_APP_API = "http://localhost:8082/api"

VUE_APP_PUBLIC_PATH = "./"

  

ACCESS_KEY_ID = "xxxxxxxxxxxxx"

ACCESS_KEY_SECRET = "xxxxxxxxxxxxx"

REGION = "oss-cn-hangzhou"

BUCKET = "test"

PREFIX = "test-blog"

  

IS_ANALYZE = true;

创建完成后，修改package.json里的script：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "build:debug": "vue-cli-service build --mode debug",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },

PS：其中NODE_ENV跟BASE_URL是必有变量，其他定义的变量只有以VUE_APP开头的变量才能在页面中访问到，.env是能够被任何环境访问到的，是通用配置，但是级别较低，重名变量会被指定mode的env覆盖。
这样，当跑serve，环境变量取用的是.env的，跑build，环境变量取.env.production得，跑build:debug，环境变量取.env.debug的，这样我们就可以动态的在项目中判断项目的NODE_ENV，并采用不同的操作。
下图是我npm run serve打印出来的process.env
以及在build之后放在服务器上的网页打印出来的process.env

可以看到，在不同环境采用的是不同env文件中的变量。我们可以根据这些去在不同环境做不同的操作。
比如axios接口地址前缀就可以根据环境改变:

const request= axios.create({
  baseURL: process.env.VUE_APP_API
});

5.结语
本来还想写关于vue.config.js的通用配置，以及image-webpack-loader,webpack-spritesmith等等插件的使用配置，但是内容提多的，之后写个（二）吧。
时间有点晚了，准备打会游戏放松一下睡觉了😪。
总之先把仓库地址放上来把：vue初始模板（未完）

PS：因为墙的缘故image-webpack-loader直接npm安装会导致其依赖库安装失败或是不全，然后打包的时候会报找不到模块依赖imagemin-gifsicle等错误，如果没有翻墙工具或不在国外服务器上构建，建议通过cnpm或是其他源安装（推荐），或者去该模块地址gifsicle下载下来放到node_modules文件夹里。
下图是我在自己的服务器上（国外）执行npm i的时候

下图是我在家未翻墙npm i的情况

可以看到基本都失败了，而且非常慢，能安装个半天。