VUE3.0 二. vue-cli3配置指南

一.vue.config.js 详解

官网地址： https://cli.vuejs.org/zh/config/

使用vue3 的时候需要添加一个vue.config.js

const path = require('path');
module.exports = {// 基本路径publicPath: process.env.NODE_ENV === 'production' ? '' : '/',// 输出文件目录outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',// eslint-loader 是否在保存的时候检查lintOnSave: true,/*** webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md**/chainWebpack: (config) => {},configureWebpack: (config) => {// config.resolve = { // 配置解析别名//   extensions: ['.js', '.json', '.vue'],//   alias: {//     '@': path.resolve(__dirname, './src'),//     'public': path.resolve(__dirname, './public'),//     'components': path.resolve(__dirname, './src/components'),//     'common': path.resolve(__dirname, './src/common'),//     'api': path.resolve(__dirname, './src/api'),//     'views': path.resolve(__dirname, './src/views'),//     'data': path.resolve(__dirname, './src/data')//   }// }},// 生产环境是否生成 sourceMap 文件productionSourceMap: false,// css相关配置css: {// 是否使用css分离插件 ExtractTextPluginextract: true,// 开启 CSS source maps?sourceMap: false,// css预设器配置项loaderOptions: {},// 启用 CSS modules for all css / pre-processor files.modules: false},// use thread-loader for babel & TS in production build// enabled by default if the machine has more than 1 coresparallel: require('os').cpus().length > 1,/***  PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa*/pwa: {},// webpack-dev-server 相关配置devServer: {open: false, // 编译完成是否打开网页host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问port: 8080, // 访问端口https: false, // 编译失败时刷新页面hot: true, // 开启热加载hotOnly: false,proxy: null, // 设置代理overlay: { // 全屏模式下是否显示脚本错误warnings: true,errors: true},before: app => {}},/*** 第三方插件配置*/pluginOptions: {}
}

跨域以及html，css以及其他的webpack模块设置在vue.config.js中进行设置。具体的参数配置请参考官网。

二.项目结构以及配置说明：

以项目 harry-vue为例：项目地址

这里的dist、package.json、.env.development、.env.production、.env.staging、vue.config.js环境变量和模式等所需要的文件。我们简单的了解一下

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

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

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

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

# just a flag
ENV = 'development'# base api
VUE_APP_BASE_API = 'api'
#（这里这样设置的目的是在开发中一般要设置跨域，这样设置，在axios请求的时候就无需方法名前加/api/，因为下面会设置默认的/api/）# vue-cli使用VUE_CLI_BABEL_TRANSPILE_MODULES环境变量，
# 控制是否启用babel-plugin-dynamic-import-node插件。
# 它只能通过将所有import（）转换为require（）来做一件事。
# 此配置可以显着提高热更新的速度，
# 当您有大量页面时。
# 详细信息：https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.jsVUE_CLI_BABEL_TRANSPILE_MODULES = true

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

# just a flag
ENV = 'production'# base api
VUE_APP_BASE_API = '/prod-api'

.env.staging 文件是生产环境演示所用

NODE_ENV = production# just a flag
ENV = 'staging'# base api
VUE_APP_BASE_API = '/stage-api'

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们
然后package.json文件scripts中添加该运行和打包脚本：

  "scripts": {"dev": "vue-cli-service serve","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging","preview": "node build/index.js --preview","lint": "eslint --ext .js,.vue src","test:unit": "jest --clearCache && vue-cli-service test:unit","test:ci": "npm run lint && npm run test:unit","svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"}

用法：vue-cli-service serve [options] [entry]

用法：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 [options] [entry|pattern]

用法：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 在这里指的就是development环境（就是文件名.env后面的development，不是文件中的代码环境VUE_APP_ENV这个是自定义用于代码中判断所用。因为项目中文件名就是【.env.development】，所以scripts中忽略了）
build默认的是production，指的就是production环境，同理也是文件名【.env.后缀】

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

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

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

npm run  dev

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