01、vue 新建项目配置（我所需要的配置）

1、初始化vue项目

//下载脚手架
npm install -g vue-cli   
//初始化webpack 项目
vue init webpack my-project
cd my-project
yarn 
yarn dev
//新项目就能跑起来了
//查看vue 版本号
vue -V

2、px转rem

npm i lib-flexible --save  //下载
npm install px2rem-loader //下载
import 'lib-flexible/flexible'  //在main.js引入
//配置px2rem-loader
//在build文件中找到util.js，将px2rem-loader添加到cssLoaders中,如：
const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

同时，在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
重启之后就可以生效了。

3、配置sass(新版的vue-cli初始化的项目只需要下载不需要配置)

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
//配置: 在build文件夹下的webpack.base.conf.js的rules里面添加配置
// 如果你是.sass文件要设置
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}
使用
<style lang="scss">

4、配置stylus css预加载编译器

下载stylus插件  yarn add stylus stylus-loader --save -dev
使用的时候 如果是在.vue文件里面写的话就是这样
<style scoped  lang="stylus">
.home
  background #f00
  width 100px
  height 100px
</style>

5、路由按需加载
1、路由修改

routes: [
    {
      path: '/',
      name: 'Home',
      // component: Home,
      component: () => import(/* webpackChunkName: "Home" */ '@/pages/Home/')
    },
]

2、在webpack.base.conf.js文件中配置chunkFileName

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    chunkFilename: '[name].js', //只需添加这一行
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

5、打包之后去掉map文件

WX20190327-150203.png