一干旧、config下index.js
image
說(shuō)明：1缴渊、反向代理需要添加的代碼（應(yīng)用實(shí)例：axios.post('api/databass/info',dataObj,{ "x-access-token": global.token }).then(response=>{}))
2、設(shè)置為true時(shí)運(yùn)行項(xiàng)目會(huì)在瀏覽器中自動(dòng)打開(kāi)（老版本的腳手架默認(rèn)是true）
3、解決打包發(fā)布上線css、js路徑錯(cuò)亂問(wèn)題
4瓢省、該屬性是在build時(shí)會(huì)在js文件夾中產(chǎn)生很多.map文件（很占打包容量），設(shè)成false體積能縮小一半
二痊班、build下utils.js
image
說(shuō)明：沒(méi)有該屬性時(shí)勤婚，在css中寫(xiě)的background的圖片在打包上線后會(huì)訪問(wèn)不到（針對(duì)非根目錄下的項(xiàng)目），添加publicPath屬性目的是兼容發(fā)布上線后背景圖正常顯示的
三涤伐、多行文本框不能正常顯示省略號(hào)的問(wèn)題
image
說(shuō)明：optimize-css-assets-webpack-plugin這個(gè)插件的問(wèn)題馒胆，注釋掉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 實(shí)現(xiàn)全局變量策菜、方法注入
function generateSassResourceLoader () {
var loaders = [
cssLoader,
// postcssLoader, px2remLoader, // 若需要?jiǎng)t加上這一行煮嫌，不用就不加
'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新增和修改以上代碼
-
項(xiàng)目中運(yùn)用eslint宇攻，使用i18n插件時(shí)脸秽，在i18n下en.js中會(huì)報(bào)如下警告
image.png
解決辦法：修改eslint配置文件，如圖所示：
新增所示代碼
