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 = {
// 部署应用时的基本 URL
publicPath: process.env.NODE_ENV === 'production'
? '192.168.60.110:8080' : './',
// build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
outputDir: 'dist',
// build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: 'static',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath: 'index.html',
// 默认在生成的静态资源文件名中包含hash以控制缓存
filenameHashing: true,
// 构建多页面应用,页面的配置
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时,
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话,就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
},
// 是否在开发环境下通过 eslint-loader, `ture` | `false` | `"error"`
// 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
lintOnSave: process.env.NODE_ENV !== 'production',
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// Babel 显式转译列表
transpileDependencies: [],
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
productionSourceMap: true,
// 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性(注:仅影响构建时注入的标签)
crossorigin: '',
// 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
integrity: false,
// 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中
// 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.plugins.push(
//添加代码压缩工具,及设置生产环境自动删除console
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
);
// 用cdn方式引入,分离第三方插件
config.externals = {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios'
}
} else {
// 为开发环境修改配置...
}
},
// 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作)
chainWebpack: config => {
// 引入babel-polyfill
config
.entry('index')
.add('babel-polyfill')
.end();
// 添加文件路径别名
config.resolve.alias.set("@", resolve("src"));
if (isProduction) {
// 生产环境注入cdn
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
});
}
},
// css的处理
css: {
// 当为true时,css文件名可省略 module 默认为 false
modules: true,
// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS
// 默认生产环境下是 true,开发环境下是 false
extract: false,
// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
sourceMap: false,
//向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
loaderOptions: {
css: {},
less: {},
sass: {
// 自动注入全局变量样式
data: ` @import "src/你的全局scss文件路径"; `
}
}
},
// 所有 webpack-dev-server 的选项都支持
// webpack-dev-server 相关配置
devServer: { // 设置代理
hot: true, //热加载
host: '0.0.0.0', //ip地址
port: 8080, //端口
https: false, //false关闭 https,true 为开启
open: true, //自动打开浏览器
// 设置让浏览器 overlay 同时显示警告和错误
overlay: {
warnings: true,
errors: true
},
proxy: {
'/api': { //本地
target: 'localhost:8080/',
// 如果要代理 websockets
ws: true,
changeOrigin: true
},
'/test': { //测试
target: 'localhost:8082/'
},
'/pre-release': { //预发布
target: 'http://XXX.com/'
},
'/production': { //正式
target: 'http://XXX.com/'
}
}
},
// 是否为 Babel 或 TypeScript 使用 thread-loader
// 该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
parallel: require('os').cpus().length > 1,
// 向 PWA 插件传递选项
pwa: {},
// 可以用来传递任何第三方插件选项
pluginOptions: { }
}
2,package.json 配置
-
json文件不能用//注释,
-
以下各种build命令适用于不同环境
"scripts": {
"serve": "vue-cli-service serve",
// "zzzzzzzzz": "打包默认会删除build 目录及文件,可以增加 --no-clean 每次不删除",
"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
第一次见Source Map这个专业词语…