一、先看兩段主要的代碼（vue.config.js和public/index.html）
const path = require('path');
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
// 輸出文件目錄
outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
lintOnSave: false,
chainWebpack: (config) => {
// 發(fā)布模式
config.when(process.env.NODE_ENV === 'production', config => {
config
.entry('app')
.clear()
.add('./src/main-prod.js')
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
echarts: 'echarts',
'vue-quill-editor': 'VueQuillEditor',
'element-ui': 'ELEMENT'
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
// 開(kāi)發(fā)模式
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
})
//配置解析svg文件
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]",
include: ["./src/icons"]
});
},
configureWebpack: (config) => {
config.resolve = { // 配置解析別名
extensions: ['.js', '.json', '.vue'], // 自動(dòng)添加文件名后綴
alias: {
'vue': 'vue/dist/vue.js',
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components')
}
}
},
// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: false,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: false,
// 開(kāi)啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {
scss: {
prependData: `@import "./src/styles/main.scss";`
}
},
// requireModuleExtension: false
// 啟用 CSS modules for all css / pre-processor files.
// modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
/**
* PWA 插件相關(guān)配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
*/
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
},
// webpack-dev-server 相關(guān)配置
devServer: {
open: false, // 編譯完成是否打開(kāi)網(wǎng)頁(yè)
host: '0.0.0.0', // 指定使用地址级乐，默認(rèn)localhost,0.0.0.0代表可以被外界訪問(wèn)
port: 8080, // 訪問(wèn)端口
https: false, // 編譯失敗時(shí)刷新頁(yè)面
hot: true, // 開(kāi)啟熱加載
hotOnly: false,
proxy: {
'/devApi': {
target: "http://www.web-jshtml.cn/vue_admin_api/token",
//API服務(wù)器的地址 http://www.web-jshtml.cn/api
changeOrigin: true,
pathRewrite: {
'^/devApi': ''
}
}
},
overlay: { // 全屏模式下是否顯示腳本錯(cuò)誤
warnings: true,
errors: true
},
before: app => {
}
},
/**
* 第三方插件配置
*/
pluginOptions: {}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>微信息管理系統(tǒng)</title>
<% if(htmlWebpackPlugin.options.isProd){ %>
<!-- css -->
<!-- 富文本編輯器 的樣式表文件 -->
<link rel="stylesheet" />
<link rel="stylesheet" />
<link rel="stylesheet" />
<link rel="stylesheet" />
<!-- js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/vue-router/3.1.5/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<!-- 富文本編輯器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
二孕蝉、將main.js復(fù)制為兩個(gè),一個(gè)main-prod.js ,另一個(gè)main-dev.js.一個(gè)用于開(kāi)發(fā)用,一個(gè)發(fā)布用（需要注釋一些東西,見(jiàn)下文）
image.png
三抡爹、總共分為三步
1.在vue.config.js里面配置externals,添加不需要打包的依賴（這些依賴都采用cdn引入）
2.注釋上訴依賴在main-prod.js中的引入
3.將上訴依賴的cdn鏈接添加到public/index.html中
3.1 cdn鏈接 http://www.staticfile.org/
3.1注意vue的引入應(yīng)當(dāng)在element.js的前面
三、具體引入
1.element:
externals中配置 'element-ui': 'ELEMENT' 只能這么寫(xiě)
main.js相關(guān)element全部注釋
public/index.html需要引入一個(gè)js,一個(gè)css
2.echarts
main.js全部注釋
但是用到echarts的那個(gè)vue模塊 中的引入,不注釋
index中引入一個(gè)js（沒(méi)有css）
3.vue(router,axios)
main.js照常引入（什么都不用注釋）
index中引入一個(gè)js
4.nprogress
main.js中照常引入,然后注釋一個(gè)css
index中引入一個(gè)css,一個(gè)js
5.vue-quill-editor
main中只引入一個(gè)vue-quill-editor潘靖，注釋三個(gè)css
index中引入三個(gè)css,2個(gè)js
