Skip to content

M
myblogVue_django

yma16 / myblogVue_django

通知 5
Star 1
Fork 0
M
myblogVue_django
提交 a903d32d 编写于 作者: yma16's avatar yma16
浏览文件
操作

Production

上级 080e6cca
显示空白变更内容
内联 并排
Showing with 194 addition and 79 deletion
build/webpack.dev.conf.js
浏览文件 @ a903d32d
......@@ -13,6 +13,9 @@ const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
//cdn 配置
let externalConfig = []
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
......@@ -55,7 +58,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
inject: true,
cdnConfig: externalConfig, // cdn配置
}),
// copy custom myblog_static assets
new CopyWebpackPlugin([
......
build/webpack.prod.conf.js
浏览文件 @ a903d32d
......@@ -11,37 +11,85 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = process.env.NODE_ENV === 'testing'
const env =
process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
// cdn 引入
let externalModules = {}
//cdn 配置
let externalConfig = []
if (process.env.NODE_ENV === 'production') {
//生产环境
externalModules = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
'element-ui': 'element-ui',
echarts: 'echarts',
highlight: 'hljs',
}
externalConfig = [
{js: 'https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js', css: ''},
{
js: 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js',
css: '',
},
{js: 'https://unpkg.com/axios/dist/axios.min.js', css: ''},
{js: 'https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js', css: ''},
{
js: 'https://unpkg.com/element-ui/lib/index.js',
css: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
},
{
js: 'https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js',
css: '',
},
{
js: 'https://cdn.bootcdn.net/ajax/libs/highlight.js/11.6.0/highlight.min.js',
css: '',
},
{
js: '',
css: 'https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css',
},
{
js: '',
css: 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css',
},
]
}
const webpackConfig = merge(baseWebpackConfig, {
externals: externalModules, //打包忽略
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
usePostCSS: true,
}),
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
'process.env': env,
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
warnings: false,
},
},
sourceMap: config.build.productionSourceMap,
parallel: true
parallel: true,
}),
// extract css into its own file
new ExtractTextPlugin({
......@@ -56,27 +104,28 @@ const webpackConfig = merge(baseWebpackConfig, {
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
? {safe: true, map: {inline: false}}
: {safe: true},
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
filename:
process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
removeAttributeQuotes: true,
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
chunksSortMode: 'dependency',
cdnConfig: externalConfig, // cdn配置
onlyCss: true, //dev下只加载css
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
......@@ -90,17 +139,15 @@ const webpackConfig = merge(baseWebpackConfig, {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
)
}
},
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
minChunks: Infinity,
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
......@@ -109,7 +156,7 @@ const webpackConfig = merge(baseWebpackConfig, {
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
minChunks: 3,
}),
// copy custom myblog_static assets
......@@ -117,33 +164,50 @@ const webpackConfig = merge(baseWebpackConfig, {
{
from: path.resolve(__dirname, '../myblog_static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
ignore: ['.*'],
},
]),
],
})
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
'\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
),
threshold: 10240,
minRatio: 0.8
minRatio: 0.8,
})
)
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
if (config.build.isIgnoreLogs) {
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
let optimization = [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true, //去掉debugger
drop_console: true, // 去掉console
pure_funcs: ['console.log'], // 移除console
},
},
sourceMap: config.build.productionSourceMap,
parallel: true,
}),
]
webpackConfig.plugins.push(...optimization)
}
module.exports = webpackConfig
config/index.js
浏览文件 @ a903d32d
......@@ -81,6 +81,7 @@ module.exports = {
productionGzip: true,
productionGzipExtensions: ["js", "css"],
isIgnoreLogs:true,
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
......
index.html
浏览文件 @ a903d32d
......@@ -6,23 +6,26 @@
<title>yma16前端日记</title>
<link
rel="shortcut icon"
href="myblog_static/utils/fx_background/image/logo.ico"
href="./myblog_static/utils/fx_background/image/logo.ico"
/>
<!-- up -->
<link
rel="stylesheet"
href="myblog_static/utils/fx_background/css/core.css"
href="./myblog_static/utils/fx_background/css/core.css"
/>
<style>
body {
background: url(myblog_static/utils/fx_background/image/background.png);
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
</style>
<!-- cdn css-->
<% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.css){ %>
<link href="<%= item.css %>" rel="stylesheet" />
<% }}) %>
<!-- -->
</head>
<!-- 阿里 -->
<style type="text/css">
......@@ -36,15 +39,21 @@
</style>
<body>
<div id="app"></div>
<div id="canvas">
<div id="life"></div>
<div id="is"></div>
<div id="beautiful"></div>
</div>
<!-- cdn js -->
<% htmlWebpackPlugin.options.cdnConfig.forEach(function(item){ if(item.js){ %>
<script type="text/javascript" src="<%= item.js %>"></script>
<% }}) %>
</body>
<!-- built files will be auto injected -->
<!-- <script src="myblog_static/utils/fx_background/js/jquery-2.1.4.min.js"></script>-->
<!-- 资源-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<!-- 我的阿里图标库 -->
<script src="https://yongma16.xyz/static/aliyunIcon/icon.js"></script>
......
src/main.js
浏览文件 @ a903d32d
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//vue cdn
import Vue from 'vue'
import VueRouter from 'vue-router'
import axios from 'axios'
import cookies from 'vue-cookies'
import hljs from 'highlight.js'
import useRouter from './router'
import App from './App'
import importElementComponents from './importElement'
import importEchartsComponents from './importEchartsComponents'
// 样式
// 样式cnd
import 'github-markdown-css/github-markdown.css'
import 'highlight.js/styles/github.css'
import 'nprogress/nprogress.css'
// 无需cdn
import useRouter from './router'
import cookies from 'vue-cookies'
import App from './App'
import 'highlight.js/styles/github.css'
import * as echarts from 'echarts/core'
// 路由
const router = useRouter(Vue, VueRouter)
// 按需引入elementui
importElementComponents(Vue)
// 按需引入echarts
importEchartsComponents(Vue)
Vue.config.productionTip = false
Vue.use(cookies)
const env = process.env.NODE_ENV
// 生产环境
if (env === 'production') {
try {
// 路由
const router = useRouter(Vue, VueRouter)
Vue.use(hljs)
Vue.directive('highlight', function (el) {
Vue.config.productionTip = false
Vue.use(cookies)
Vue.use(hljs)
Vue.directive('highlight', function (el) {
const blocks = el.querySelectorAll('pre code')
blocks.forEach(block => {
blocks.forEach((block) => {
hljs.highlightBlock(block)
})
})
// cookie
Vue.prototype.$cookies = cookies
// axios
})
// cookie
Vue.prototype.$cookies = cookies
// axios
Vue.use(axios)
Vue.prototype.$axios = axios
window.$axios_w = axios
Vue.prototype.$echarts = echarts
Vue.use(axios)
Vue.prototype.$axios = axios
window.$axios_w = axios
Vue.prototype.$cookies.set('user_session', 'null')
Vue.prototype.$cookies.set('user_session', 'null')
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
} catch (e) {
throw Error(e)
}
} else {
// 路由
const router = useRouter(Vue, VueRouter)
// 按需引入elementui
importElementComponents(Vue)
// 按需引入echarts
importEchartsComponents(Vue)
new Vue({
Vue.config.productionTip = false
Vue.use(cookies)
Vue.use(hljs)
Vue.directive('highlight', function (el) {
const blocks = el.querySelectorAll('pre code')
blocks.forEach((block) => {
hljs.highlightBlock(block)
})
})
// cookie
Vue.prototype.$cookies = cookies
// axios
Vue.use(axios)
Vue.prototype.$axios = axios
window.$axios_w = axios
Vue.prototype.$cookies.set('user_session', 'null')
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
})
}
src/router/index.js
浏览文件 @ a903d32d
......@@ -9,7 +9,6 @@ const Bilicom = () => import('@/components/Bilicom')
const Mavoneditor = () => import('@/components/Mavoneditor')
const GrilShow = () => import('@/components/GrilShow')
const Csslearn = () => import('@/components/Csslearn')
const defaultRoutes = [
{
path: '/',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或