vue-cli3.0配置记录

vue-cli 3.0

vue-cli 3.0 版本的记录

安装

install:

npm install @vue/cli -g

yarn global add @vue/cli

create project:

vue create project-name

// 如果要兼容旧版vue-cli需要安装:

npm install -g @vue/cli-init

配制

根目录创建vue-config.js 对项目进行配置

module.exports = {
    baseUrl: '', // 默认目录 默认'/'
    outputDir: '', // 文件输出地址 默认'dist'
    assetsDir: '', // 静态资源 
    indexPath: '', // 默认页面 默认'index.html'
    lintOnSave: true, // eslint保存检测语法
    pages: {
        index: {
            entry: 'src/main.js', // 入口文件
            template: 'public/index.html',
            filename: 'index.html',
            title: 'xxxx', // html使用<title><%= htmlWebpackPlugin.options.title =%></title>
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        subpage: 'src/sub/main.js'
    },
    chainWebpack: config => {
        config.resolve.alias
          .set('@', resolve('src'))
          .set('_c', resolve('src/components'))
          .set('ast', resolve('src/assets'))
        if (process.env.NODE_ENV!=='production') {
            config
              .plugin('hot') // 配置插件
              .use(webpack.HotModuleReplacementPlugin)   
        }
      },
      css: {
        loaderOptions: {
          less: {
            javascriptEnabled: true // 解决less打包报错
          }
        }
    }
}
.env 配置全局参数 VUE_APP_XX 必须以VUE_APP命名的参数才能识别，

默认读取.env 根据环境读取.env.dev .env.prod ...参数

package打包配置

"dev": "vue-cli-service serve  --open --hot",
"build": "vue-cli-service build --mode prod",
"dev3": "vue-cli-service build --mode dev",
"staging": "vue-cli-service build --mode staging",

package build 不带--mode默认打包方式是production, 如果需要其他的环境使用production打包需要在.env.[mode]文件添加NODE_ENV=production