截止到2020.3.19,vue-cli版本已經到了4.2.3,以下爲常用的參數及介紹。
const path = require("path");
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'//生產環境,路徑爲網站的子路徑
: '/',//開發環境下
outputDir:'dist',//生產環境下的打包路徑
assetsDir:"aa",//生產環境下的靜態資源css,js,img存放路徑
indexPath:"index.html",//生產環境下的index.html的路徑,默認index.html
filenameHashing:true,//生產環境下的打包文件的哈希後綴,默認true,哈希後綴是爲了瀏覽器緩存
pages: {
index: {
// page 的入口
entry: 'src/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/main.js'
},
lintOnSave:true,//是否在開發環境下通過 eslint-loader 在每次保存時 lint 代碼
//瀏覽器報以下錯時,設置runtimeCompiler: true
//You are using the runtime-only build of Vue where the template compiler is not available.
// Either pre-compile the templates into render functions, or use the compiler-included build.
runtimeCompiler: true,//是否使用包含運行時編譯器的 Vue 構建版本。設置爲 true 後你就可以在 Vue 組件中使用 template 選項了,但是會打包資源增加 10kb 左右
transpileDependencies:[],//通過babel顯示轉譯依賴,可以在該列表列出來
productionSourceMap:true,//生產環境下 會生成source map,用來在瀏覽器中F12 sources打斷點,調試代碼,默認是true,設置爲false,可以加速生產打包過程,無法調試
crossorigin:"",//設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標籤的 crossorigin 屬性,anonymous或者""(不需要用戶憑證,允許跨域),use-credentials(需要用戶憑證)
//開啓integrity<script> 標籤上啓用 Subresource Integrity (SRI)。如果你構建後的文件是部署在 CDN 上的,啓用該選項可以提供額外的安全性
// integrity:"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC",
css:{
sourceMap:false,//默認是false
loaderOptions:{}
},
//webpack 所有的選項都支持
devServer:{
host: '0.0.0.0',
port: 8090,//端口
open: true,//自動啓動瀏覽器
//服務代理
proxy:{
'/api': {
target: 'http://www.baidu.com',
ws: true,
changeOrigin: true
},
}
},
//傳遞第三方插件
pluginOptions:{
jQuery: {
}
},
// webpack配置 - 簡單配置方式
configureWebpack: {
resolve: {
alias: {
// 別名
"@api": path.resolve(__dirname, "./src/api"),
"@utils": path.resolve(__dirname, "./src/utils"),
"jQuery": "jquery"
}
},
//插件
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery'
})
]
},
}