1,基于vue-CLI3下的vue.config.js详细配置
const UglifyJsPlugin
= require('uglifyjs-webpack-plugin');
const cdn
= {
css
: [],
js
: [
'https://xxx-cdn-path/vue.runtime.min.js',
'https://xxx-cdn-path/vue-router.min.js',
'https://xxx-cdn-path/vuex.min.js',
'https://xxx-cdn-path/axios.min.js',
]
}
module
.exports
= {
publicPath
: process
.env
.NODE_ENV === 'production'
? '192.168.60.110:8080' : './',
outputDir
: 'dist',
assetsDir
: 'static',
indexPath
: 'index.html',
filenameHashing
: true,
pages
: {
index
: {
entry
: 'src/index/main.js',
template
: 'public/index.html',
filename
: 'index.html',
title
: 'Index Page',
chunks
: ['chunk-vendors', 'chunk-common', 'index']
},
subpage
: 'src/subpage/main.js'
},
lintOnSave
: process
.env
.NODE_ENV !== 'production',
runtimeCompiler
: false,
transpileDependencies
: [],
productionSourceMap
: true,
crossorigin
: '',
integrity
: false,
configureWebpack
: config
=> {
if (process
.env
.NODE_ENV === 'production') {
config
.plugins
.push(
new UglifyJsPlugin({
uglifyOptions
: {
compress
: {
warnings
: false,
drop_debugger
: true,
drop_console
: true,
},
},
sourceMap
: false,
parallel
: true,
})
);
config
.externals
= {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios'
}
} else {
}
},
chainWebpack
: config
=> {
config
.entry('index')
.add('babel-polyfill')
.end();
config
.resolve
.alias
.set("@", resolve("src"));
if (isProduction
) {
config
.plugin('html')
.tap(args
=> {
args
[0].cdn
= cdn
;
return args
;
});
}
},
css
: {
modules
: true,
extract
: false,
sourceMap
: false,
loaderOptions
: {
css
: {},
less
: {},
sass
: {
data
: ` @import "src/你的全局scss文件路径"; `
}
}
},
devServer
: {
hot
: true,
host
: '0.0.0.0',
port
: 8080,
https
: false,
open
: true,
overlay
: {
warnings
: true,
errors
: true
},
proxy
: {
'/api': {
target
: 'localhost:8080/',
ws
: true,
changeOrigin
: true
},
'/test': {
target
: 'localhost:8082/'
},
'/pre-release': {
target
: 'http://XXX.com/'
},
'/production': {
target
: 'http://XXX.com/'
}
}
},
parallel
: require('os').cpus().length
> 1,
pwa
: {},
pluginOptions
: { }
}
2,package.json 配置
json文件不能用//注释,
以下各种build命令适用于不同环境
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:pre": "vue-cli-service build --mode pre-release",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
3,前端调试工具—Source Map
SourceMap 使用教程
第一次见Source Map这个专业词语…
还是参考阮一峰大神的博客!!!!
转载请注明原文地址:https://ipadbbs.8miu.com/read-53481.html