alias cli3 配置_vue-cli3全面配置详解

创建项目

配置环境变量

通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境

在项目根目录中新建.env, .env.production,...等文件

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过process.env.VUE_APP_BASE_API访问

NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

.env serve默认的环境变量

NODE_ENV = 'development'

VUE_APP_BASE_API = ''

.env.production build默认的环境变量

NODE_ENV = 'production'

VUE_APP_BASE_API = ''

配置vue.config.js

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);

module.exports = {

baseUrl: './', // 默认'/'，部署应用包时的基本 URL

outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录

assetsDir: '',  // 相对于outputDir的静态资源(js、css、img、fonts)目录

lintOnSave: false,

runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本

productionSourceMap: false,  // 生产环境的 source map

parallel: require('os').cpus().length > 1,

pwa: {}

};

配置proxy跨域

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);

module.exports = {

devServer: {

// overlay: {

//   warnings: true,

//   errors: true

// },

open: IS_PROD,

host: '0.0.0.0',

port: 8000,

https: false,

hotOnly: false,

proxy: {

'/api': {

target: process.env.VUE_APP_BASE_API || 'http://127.0.0.1:8080',

changeOrigin: true

}

}

}

}

//在项目中具体的配置

devServer: {

//webpack dev serve工具提供的

//   assetsSubDirectory: 'public',

//   assetsPublicPath: '/',

proxy: {

'api': { //如果请求api的话 改下面的配置

target: 'http://localhost:8080/', //转发端口

ws: true, // 是否启用websockets

changOrigin: true,

//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

pathRewrite: {

'^/api' : '/mock'

}

}

}

},

修复HMR(热更新)失效

module.exports = {

chainWebpack: config => {

// 修复HMR

config.resolve.symlinks(true);

}

}

修复Lazy loading routes Error： Cyclic dependency https://github.com/vuejs/vue-cli/issues/1669

module.exports = {

chainWebpack: config => {

config.plugin('html').tap(args => {

args[0].chunksSortMode = 'none';

return args;

});

}

}

添加别名

const path =  require('path');

const resolve = (dir) => path.join(__dirname, dir);

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);

module.exports = {

chainWebpack: config => {

// 添加别名

config.resolve.alias

.set('@', resolve('src'))

.set('assets', resolve('src/assets'))

.set('components', resolve('src/components'))

.set('layout', resolve('src/layout'))

.set('base', resolve('