vue-cli3.0基本配置项

最近我们的vue项目搭建框架升级到了vue-cli3.0，此文记录一下我们搭建项目时的经验，大牛请见谅；

初始化

首先安装vue-cli3.0,

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

然后我们可以运行命令创建一个新项目

vue create hello-world

cli-new-project.png

或者我们也可以使用图形化界面

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程

ui-new-project.png

然后我们按照提示安装我们需要的功能并初始化项目即可；

配置服务及webpack

在vue-cli3.0中对于代理服务的配置跟vue-2.x 有所不同，我们需要在项目的根目录下新建一个vue.config.js文件，我们的配置都是在这个文件里面做的，

// vue.config.js
const path = require('path');
// 引入骨架屏插件
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
//抛出我们的配置
module.exports = {
  devServer: {
    // 设置默认端口
    port: 8082,
    // 配置服务代理
    proxy: {
      '/mobileService_web_shopkeeper': {
        // 目标 API 地址
        target: '你的代理服务器地址',
        changeOrigin: true,
        pathRewrite : {
          '^/api' : '/api'
        }
      }
    },
  },
// 配置webpack
  configureWebpack: (config)=>{
    // console.log(config);
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/skeleton.js'),
        },
      },
      minimize: true,
      quiet: true,
    }))
  
  },
  chainWebpack: config => {
    config.module
    .rule('vue')
    .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        // 修改它的选项...
        options.i18n = '@kazupon/vue-i18n-loader'
        return options
      })
        
  },
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/common.scss";`
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  }
};

更多设置

• vue-cli3.0官方文档
• 浏览器兼容性
• HTML 和静态资源
• CSS 相关
• webpack 相关
• 环境变量和模式

结语

在此感谢各位大牛为vue生态所做的贡献，这才使我们在开发过程中遇到的各种问题得以有好的解决方法,并且此次3.0的更新力度还是很大的，尽快升级尽快享受哦😯。