vue-cli3创建项目

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它

Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

重新安装最新版本vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue-cli3配置指南

其中vue.config.js配置参考

接下来创建项目：

1. vue create app //app是项目名，如下图所示，这里使用默认配置
   

2. npm run serve //运行项目
   

这里也可以使用vue ui 使用图形化界面进行创建应用,具体用法不做赘述

项目结构：

这里的dist、env.dev、env.prd、env.uat、vue.config.js 环境变量和模式等所需要的文件。后面一一说道

项目中，分为开发环境和生产环境，如果每次都去做更改，就很麻烦，所以这里要根据不同的脚本区分不同的环境模式

官网：

1. .env 在所有的环境中被载入
2. .env.local 在所有的环境中被载入，但会被 git 忽略
3. .env.[mode] 只在指定的模式中被载入
4. .env.[mode].local 只在指定的模式中被载入，但会被 git 忽略

1. 在根目录新建文件，文件的格式为.env.mode 我这里分三个环境两个打 包环境一个开发环境，具体看自己项目需求而定

.env.dev 文件，该文件是平时开发所用

	NODE_ENV=development
	VUE_APP_ENV=dev
	VUE_APP_BASE_URL=/api/   （这里这样设置的目的是在开发中一般要设置跨域，这样设置，在axios请求的时候就无需方法名前加/api/，因为下面会设置默认的/api/）

.env.prd文件是生产正式环境所用的

	NODE_ENV=production
	VUE_APP_ENV=prd
	VUE_APP_BASE_URL=http://localhost:8080/

.env.uat文件是生产环境uat测试所用

	NODE_ENV=production
	VUE_APP_ENV=uat
	VUE_APP_BASE_URL=http://localhost:5000/

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们

然后package.json文件scripts中添加该运行和打包脚本：

	"serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service serve --mode dev --open",
    "prd": "vue-cli-service build --mode prd --report",
    "uat": "vue-cli-service build --mode uat --report"

vue-cli-service serve

用法：vue-cli-service serve [options] [entry]
选项：
–open 在服务器启动时打开浏览器
–copy 在服务器启动时将 URL 复制到剪切版
–mode 指定环境模式 (默认值：development)
–host 指定 host (默认值：0.0.0.0)
–port 指定 port (默认值：8080)
–https 使用 https (默认值：false)

vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]
选项：
–mode 指定环境模式 (默认值：production)
–dest 指定输出目录 (默认值：dist)
–modern 面向现代浏览器带自动回退地构建应用
–target app | lib | wc | wc-async (默认值：app)
–name 库或 Web Components 模式下的名字 (默认值：package.json 中的 “name” 字段或入口文件名)
–no-clean 在构建项目之前不清除目标目录
–report 生成 report.html 以帮助分析包内容
–report-json 生成 report.json 以帮助分析包内容
–watch 监听文件变化

其中的mode 就是指的是哪个环境，serve 默认的是development 在这里指的就是dev环境（就是文件名记住是文件.env后面的dev，不是文件中的代码环境VUE_APP_ENV这个是自定义用于代码中判断所用。）
build默认的是production，指的就是prd环境，同理也是文件名.env.后缀

这样在实际项目中在main.js中直接设置其默认地址即可，会自动设置不同的地址

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;

跨域以及html，css以及其他的webpack模块设置在vue.config.js中进行设置
这里在根路径新建vue.config.js文件。

const fs = require('fs')
module.exports = {
    productionSourceMap: false,//如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    devServer: {//开发环境代理配置跨域，生产环境不需要
        port: 3000,
        proxy: {
            '/api': {
                target: "URL",
                ws: true,
                changeOrigin: true
            }
        }
    },
    css: {
        loaderOptions: {
            sass: {
                data: fs.readFileSync('src/style/common.scss', 'utf-8')//
            }
        }
    }
}
这里只简单的设置了跨域和sass的全局导入loader。

具体的参数配置请参考官网。
PS注意 mode而不是model 。

验证的时候到了
在main.js中打印process.env

npm run  dev

可以看到.env.dev中的数据被打印出来了

咻咻~~