记录一些在不同vue-cli版本中可能会被忽视的问题

Vue-cli 2.0安装创建

npm install -g vue-cli

vue init webpack project-name

Vue-cli 3.0安装创建

npm install -g @vue/cli-service-global

vue create project-name

值得注意的是3.0提供了 vue ui 命令，通过可视化界面来使用 GUI 安装和管理插件，例如使用 iView 按需引入的时候，可以直接在可视化界面中安装 vue-cli-plugin-iview，则可以实现按需引

主要差异

1. vue-cli 3.0的项目目录结构也不同于vue-cli 2.0，3.0摈弃了 config 、 build 、 static 目录，新增了 public 目录，将根目录下的 index.html 放置在 public 目录下
2. 新增 webpack 的配置文件 vue.config.js ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等。（vue.config.js与webpackconfig.js中的配置属性名称不同，详情请参考官方文档）
3. 新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容。
4. 新增 babel.config.js 替代原先版本的.babelrc，具备和原先.babelrc一样的作用。

最后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道webpac具体做了些什么，所以默认没有暴露webpack的配置文件，项目初始化后vue.config.js并不存在，需要开发者手动创建。

vue.config.js下根据环境区分项目文件路径前缀

const IS_PRODUCTION = process.env.NODE_ENV === 'production'
module.exports = {
    lintOnSave: process.env.NODE_ENV !== 'production',
    assetsDir: IS_PRODUCTION ? 'scan' : './'
}

webpack.config.js下根据环境区分项目文件路径前缀

// assetsRoot : 在当前目录的上一级 的 dist目录下输出资源文件
// assetsSubDirectory: 把所有的静态资源打包到 dist下的 assets文件夹下
// assetsPublicPath :代表生成的index.html文件，里面引入资源时，路径前面要加上 ./hello/,也就是assetsPublicPath的值

module.exports={
      output:{
           path:path.resolve(__dirname,"dist"),
           assetsPublicPath："/scan/"
      }
}