vue-cli4 脚手架的搭建

vue-cli4 脚手架的搭建：

参考：https://www.cnblogs.com/blcorder/p/12015715.html

环境配置

下面就是关于项目的环境配置了，我这边一般喜欢用 test、preview、production分别表示测试，预览，生产三种环境

修改 package.json 文件如下

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

在项目根目录下新建 .env.test、 .env.production 文件，分别对应两个环境的配置文件，注意，名字要与 --mode 后面的名字分别对应

.env.test 代码如下

    NODE_ENV="test"
    VUE_APP_BASE_URL="测试环境域名"

.env.production 代码如下

    NODE_ENV="production"
    VUE_APP_BASE_URL="生产环境域名"

ok，这样环境就配置好了，分别用以下命令来打包不同环境的包就可以了。

另外需要说明一点的是，本地环境会默认从 .env.development 文件中读取配置，所以记得有需要记得新建一个然后存放配置

我的 .env.development 代码如下

    NODE_ENV="development"
    VUE_APP_BASE_URL="本地环境域名"

项目配置

从 vue-cli3.0 开始 build 和 config 目录就取消了，如果需要修改配置，可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置，因为项目的配置比较多，这里就不分别介绍了，可以 访问官方文档
https://cli.vuejs.org/zh/config/#vue-config-js
例如

module.exports = {
    /*打包后静态资源存放目录*/
    assetsDir: undefined,
    publicPath: './',
    outputDir: './surface'
}