之前写了一篇vue-cli3的配置（https://segmentfault.com/a/11...），建议升级到vue-cli4。
vue-cli4脚手架创建的目录更加的合理性，其他好像没什么变化
vue-cli的升级官网上有介绍，建议都使用yarn
卸载：
npm uninstall vue-cli -g或yarn global remove vue-cli
如果你的版本是vue-cli3的话，
npm uninstall @vue/cli -g或yarn global remove @vue/cli安装：
npm install -g @vue/cli
# OR
yarn global add @vue/cli创建你的项目（创建的方式看上面的链接）
vue create hello-world(项目名)重点介绍分环境打包下的vue.config.js代码如下（注意process.env.outputDir和process.env.VUE_APP_MODE和.env文件有关）
const path = require('path')
module.exports = {
publicPath: './', // 基本路径,打包时加上.
outputDir: process.env.outputDir, // 输出文件目录
lintOnSave: false, // eslint-loader 是否在保存的时候检查
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// webpack配置
chainWebpack: (config) => {
config.resolve.symlinks(true)
},
configureWebpack: (config) => {
if (process.env.VUE_APP_MODE === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
} else {
// 为开发环境修改配置...
config.mode = 'development'
}
Object.assign(config, {
// 开发生产共同配置
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components'),
'@p': path.resolve(__dirname, './src/views')
} // 别名配置
}
})
},
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
// css相关配置
css: {
// extract: true, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps?
loaderOptions: {
css: {}, // 这里的选项会传递给 css-loader
postcss: {
plugins: [
// 把px单位换算成rem单位
require('postcss-pxtorem')({
rootValue: 75, // 换算的基数(设计图750的根字体为32)
selectorBlackList: ['.van-'], // 要忽略的选择器并保留为px。
propList: ['*'], // 可以从px更改为rem的属性。
minPixelValue: 2 // 设置要替换的最小像素值。
}),
require('autoprefixer')
]
// plugins: [
// require('autoprefixer')
// ]
} // 这里的选项会传递给 postcss-loader
}, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
// modules: false, // 启用 CSS modules for all css / pre-processor files.
requireModuleExtension: true
},
parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
// webpack-dev-server 相关配置
devServer: {
open: true, // 自动打开浏览器
host: '0.0.0.0', // 允许外部ip访问
port: 8022, // 端口
https: false, // 启用https
overlay: {
warnings: true,
errors: true
}, // 错误、警告在页面弹出
// proxy: {
// [process.env.VUE_APP_MODE]: {
// target: `http://cs.ep.eichong.com:2482/api`,
// changeOrigin: true,
// pathRewrite: {//看后台是否有，决定是否重写
// ["^" + process.env.VUE_APP_API_URL]: ""
// }
// }
},
// 第三方插件配置
pluginOptions: {}
}
不同环境的.env文件（NODE_ENV这个参数好像没什么关系），VUE_APP_API_URL为接口网址,可以直接调用process.env.VUE_APP_API_URL
文件.env.dev
NODE_ENV = 'production'
VUE_APP_MODE = 'dev'
VUE_APP_API_URL = '--------'
outputDir = dev文件.env.development
NODE_ENV = 'production'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = '------'
outputDir = development文件.env.pre
NODE_ENV = 'production'
VUE_APP_MODE = 'pre'
VUE_APP_API_URL = '----'
outputDir = pre文件.env.production
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = '------'
outputDir = production修改package.json，打包命令分别为
yarn serve(运行的是.env.development)
yarn build(运行的是.env.development)
yarn build-dev
yarn build-test
yarn build-pre
yarn build-publish
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-dev": "vue-cli-service build --mode dev",
"build-test": "vue-cli-service build --mode test",
"build-pre": "vue-cli-service build --mode pre",
"build-publish": "vue-cli-service build && vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
}区别打包的输出路径分别为dist,dev，test，pre，production
然后修改.gitignore文件，增加如下
/dist
/dev
/test
/pre
/production