vue常用插件和配置

1.使用vue-cli创建项目

vue init webpack vue-element-admin

1.1启用scss

/build/utils.js文件写了自动配置的代码，所以直接安装node-sass和sass-loader插件就行了

cnpm i node-sass sass-loader -D

1.2配置全局scss

// 安装sass-resources-loader插件
cnpm i sass-resources-loader -D
// 修改/build/utils.js文件
scss: generateLoaders('sass').concat({ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/scss/conf.scss') } })

1.3使用dynamic-import-node插件解决异步路由热更新慢的问题

// 安装dynamic-import-node插件
cnpm i babel-plugin-dynamic-import-node -D
// 配置.babelrc
"env": {
    "development": {
        "plugins": ["dynamic-import-node"]
    }
}

1.4配置网站图标favicon.ico

1.4.1配置HtmlWebpackPlugin插件

// 在webpack.dev.conf.js 里面的 plugins配置
new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    favicon: './favicon.ico'      //增加这条
}),
//在 webpack.prod.conf.js 里面 plugins 配置
new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  favicon: './favicon.ico',         //增加这条
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
}),

1.4.2配置index.html

1.5浏览器中可以看到.vue源文件的问题

// 修改项目中的config/index.js文件中的 build 下的 productionSourceMap属性为false
build: {
    productionSourceMap: false
}