webpack使用cdn

This commit is contained in:
qiuxingzhou 2020-04-28 19:02:48 +08:00
parent 524c163396
commit 06555eb5be
12 changed files with 130 additions and 30 deletions

1
.env Normal file
View File

@ -0,0 +1 @@
# 所有环境默认

13
dependencies-cdn.js Normal file
View File

@ -0,0 +1,13 @@
module.exports = [
{ name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' },
{ name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', css: '' },
{ name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' },
{ name: 'brace/ext/language_tools', library: 'language_tools', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', css: '' },
{ name: 'brace/mode/html', library: 'html', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js', css: '' },
{ name: 'brace/mode/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js', css: '' },
{ name: 'brace/mode/less', library: 'less', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js', css: '' },
{ name: 'brace/theme/chrome', library: 'chrome', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js', css: '' },
{ name: 'brace/snippets/javascript', library: 'javascript', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js', css: '' },
// { name: 'vue2-ace-editor', library: 'Vue2ACEEditor', js: 'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js', css: '' },
{ name: 'markdown-it', library: 'markdownit', js: 'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js', css: '' },
]

4
package-lock.json generated
View File

@ -4253,7 +4253,7 @@
},
"ejs": {
"version": "2.7.4",
"resolved": "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&sync_timestamp=1585506989655&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz",
"resolved": "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz",
"integrity": "sha1-SGYSh1c9zFPjZsehrlLDoSDuybo=",
"dev": true
},
@ -11934,7 +11934,7 @@
},
"webpack-bundle-analyzer": {
"version": "3.7.0",
"resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846510646&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz",
"resolved": "https://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-3.7.0.tgz?cache=0&sync_timestamp=1586846559504&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-bundle-analyzer%2Fdownload%2Fwebpack-bundle-analyzer-3.7.0.tgz",
"integrity": "sha1-hNpDTolEKJm4hNmtOORm0NsCpW8=",
"dev": true,
"requires": {

View File

@ -5,7 +5,8 @@
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
"lint": "vue-cli-service lint",
"analyz": "npm_config_report=true npm run build"
},
"dependencies": {
"axios": "^0.19.2",
@ -25,7 +26,8 @@
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
"vue-template-compiler": "^2.6.11",
"webpack-bundle-analyzer": "^3.7.0"
},
"eslintConfig": {
"root": true,

26
public/app.js Normal file
View File

@ -0,0 +1,26 @@
var styles = [
'https://cloud.jsonpop.cn/go2index/dist/test/app.069f50e0.css'
]
var scripts = [
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js',
'https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js',
'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/html.js',
'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/javascript.js',
'https://cdn.jsdelivr.net/npm/brace@0.11.1/mode/less.js',
'https://cdn.jsdelivr.net/npm/brace@0.11.1/theme/chrome.js',
'https://cdn.jsdelivr.net/npm/brace@0.11.1/snippets/javascript.js',
'https://cdn.jsdelivr.net/npm/vue2-ace-editor@0.0.15/index.min.js',
'https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js',
'https://cloud.jsonpop.cn/go2index/dist/test/chunk-vendors.3ecd550f.js',
'https://cloud.jsonpop.cn/go2index/dist/test/app.066f1c02.js'
]
styles.forEach(item => {
document.write(`<link rel="stylesheet" href="${item}">`);
})
scripts.forEach(item => {
document.write(`<script src="${item}"></script>`);
})

View File

@ -5,6 +5,15 @@
<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" />
<!-- 使用 CDN 加速的 CSS 文件,配置在 vue.config.js 下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<!-- 使用 CDN 加速的 JS 文件,配置在 vue.config.js 下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
<script>
var authConfig = {
@ -30,5 +39,9 @@
<body>
<div id="app"></div>
<!-- 使用 CDN 加速的 JS 文件,配置在 vue.config.js 下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>

13
public/nginx.conf Normal file
View File

@ -0,0 +1,13 @@
server {
listen 8082;
server_name localhost;
location /0: {
proxy_pass https://ossdev.achirou.workers.dev;
}
location / {
root /Users/jieshi/Desktop/MyWork/VueWork/go2index-theme-acrou/dist;
index index.html index.htm;
}
}

View File

@ -64,7 +64,7 @@ export function utc2beijing(utc_datetime) {
var unixtimestamp = timestamp + 8 * 60 * 60;
// 时间戳转为时间
var unixtimestamp = new Date(unixtimestamp * 1000);
unixtimestamp = new Date(unixtimestamp * 1000);
var year = 1900 + unixtimestamp.getYear();
var month = "0" + (unixtimestamp.getMonth() + 1);
var date = "0" + unixtimestamp.getDate();

View File

@ -10,7 +10,7 @@ export default {
option: {},
},
watch: {
option (val) {
option () {
this.render()
},
},

View File

@ -187,7 +187,7 @@ export default {
}
this.loading = false;
})
.catch(err => {
.catch(() => {
this.loading = false;
});
},
@ -200,10 +200,10 @@ export default {
history.go(-1);
}
},
copy(path) {
path = path.replace("?a=view", "");
// TODO
},
// copy(path) {
// path = path.replace("?a=view", "");
// // TODO
// },
go(path, type = "view") {
if (type === "down") {
path = path.replace("?a=view", "");

View File

@ -22,7 +22,7 @@ export default {
},
},
watch: {
option (val) {
option () {
this.content = "加载中...";
get_file(this.option, (data) => {
this.content = data;
@ -35,19 +35,18 @@ export default {
};
},
components: {
editor: require("vue2-ace-editor"),
editor: () => import('vue2-ace-editor'),
},
methods: {
render (path) { },
editorInit (editor) {
editor.setFontSize(18)
editor.session.setUseWrapMode(false);
require("brace/ext/language_tools"); //language extension prerequsite...
require("brace/mode/html");
require("brace/mode/javascript"); //language
require("brace/mode/less");
require("brace/theme/chrome");
require("brace/snippets/javascript"); //snippet
() => import("brace/ext/language_tools"); //language extension prerequsite...
() => import("brace/mode/html");
() => import("brace/mode/javascript"); //language
() => import("brace/mode/less");
() => import("brace/theme/chrome");
() => import("brace/snippets/javascript"); //snippet
},
}
}

View File

@ -1,28 +1,61 @@
const path = require("path");
const cdnDependencies = require('./dependencies-cdn')
function resolve(dir) {
return path.join(__dirname, dir);
}
// 基础路径 注意发布之前要先修改这里
let publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
// 设置不参与构建的库
let externals = {}
cdnDependencies.forEach(item => { externals[item.name] = item.library })
// 引入文件的 cdn 链接
const cdn = {
css: cdnDependencies.map(e => e.css).filter(e => e),
js: cdnDependencies.map(e => e.js).filter(e => e)
}
module.exports = {
publicPath,
lintOnSave: true,
// css: {
// loaderOptions: {
// sass: {
// prependData: `@import '~@/assets/style/public.scss';`,
// },
// }
// },
configureWebpack: config => {
const configNew = {}
if (process.env.NODE_ENV === 'production') {
configNew.externals = externals
}
return configNew
},
chainWebpack: (config) => {
/**
* 添加 CDN 参数到 htmlWebpackPlugin 配置中
*/
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn
} else {
args[0].cdn = []
}
return args
})
config.resolve.alias
.set("@", resolve("src"))
.set("@assets", resolve("src/assets"))
.set("@utils", resolve("src/utils"))
.set("@node_modules", resolve("node_modules"));
config.output
.filename("js/app.mini.js")
.end();
// 分析工具
if (process.env.npm_config_report) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
},
// 不输出 map 文件
productionSourceMap: false,
devServer: {
publicPath,
proxy: {
"/api": {
target: "https://ossdev.achirou.workers.dev/",