美文网首页
vue常用插件和配置

vue常用插件和配置

作者: 令狐铁蛋 | 来源:发表于2019-07-12 14:02 被阅读0次

    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

    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> 
    

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

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

    相关文章

      网友评论

          本文标题:vue常用插件和配置

          本文链接:https://www.haomeiwen.com/subject/vnguaqtx.html