vue实战(5)——构建vue项目需要修改的配置文件及部分插件安装

一、config下index.js

image

说明：1、反向代理需要添加的代码（应用实例：axios.post('api/databass/info',dataObj,{ "x-access-token": global.token }).then(response=>{}))

       2、设置为true时运行项目会在浏览器中自动打开（老版本的脚手架默认是true）

       3、解决打包发布上线css、js路径错乱问题

       4、该属性是在build时会在js文件夹中产生很多.map文件（很占打包容量），设成false体积能缩小一半

二、build下utils.js

image

说明：没有该属性时，在css中写的background的图片在打包上线后会访问不到（针对非根目录下的项目），添加publicPath属性目的是兼容发布上线后背景图正常显示的

三、多行文本框不能正常显示省略号的问题

image

说明：optimize-css-assets-webpack-plugin这个插件的问题，注释掉webpack.prod.conf.js中下面的代码

    new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap

            ? { safe: true, map: { inline: false } }

            : {safe: true }

    }),

四、less安装

1. cnpm install --save-dev sass-loader
2. cnpm install --save-dev node-sass
3. 在vue-cli中，使用 sass-resources-loader 实现全局变量、方法注入

  function generateSassResourceLoader () {
    var loaders = [
        cssLoader,
        // postcssLoader, px2remLoader, // 若需要则加上这一行，不用就不加
        'sass-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                  path.resolve(__dirname, '../src/assets/sass/variable.scss'),
                  path.resolve(__dirname, '../src/assets/sass/mixins.scss')
                ]
            }
        }
    ]
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

build下utils.js新增和修改以上代码

4. 项目中运用eslint，使用i18n插件时，在i18n下en.js中会报如下警告

   
   
   image.png
   
   

   解决办法：修改eslint配置文件，如图所示：

   
   
   新增所示代码