一、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安装
- cnpm install --save-dev sass-loader
- cnpm install --save-dev node-sass
- 在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新增和修改以上代码
-
项目中运用eslint，使用i18n插件时，在i18n下en.js中会报如下警告
image.png
解决办法：修改eslint配置文件，如图所示：
新增所示代码