Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
xqz
/
dianDemo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
472d602c
authored
2019-06-06 10:06:12 +0800
by
406803045
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
添加history 模式,添加打包cdn
1 parent
fcfd1c4f
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
86 additions
and
33 deletions
babel.config.js
public/index.html
src/filters/filter.js
src/filters/index.js
src/main.js
src/router/index.js
vue.config.js
babel.config.js
View file @
472d602
module
.
exports
=
{
presets
:
[
'@vue/app'
],
presets
:
[
[
'@vue/app'
,
{
useBuiltIns
:
'entry'
}]
],
plugins
:
[
[
'import'
,
...
...
public/index.html
View file @
472d602
...
...
@@ -4,8 +4,12 @@
<meta
charset=
"utf-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>
<link
rel=
"icon"
href=
"<%= BASE_URL %>favicon.ico"
>
<
% 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"
/>
<
% } %>
<title>
<
%= webpackConfig.name %>
</title>
</head>
<body>
...
...
@@ -13,6 +17,11 @@
<strong>
We're sorry but
<
%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<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>
<
% } %>
<!-- built files will be auto injected -->
</body>
</html>
...
...
src/filters/filter.js
View file @
472d602
/*
* 隐藏用户手机号中间四位
*/
export
s
.
hidePhone
=
phone
=>
{
export
const
hidePhone
=
phone
=>
{
return
phone
.
replace
(
/
(\d{3})\d{4}(\d{4})
/
,
'$1****$2'
)
}
\ No newline at end of file
...
...
src/filters/index.js
View file @
472d602
import
Vue
from
'vue'
import
filter
from
'./filter'
import
*
as
filter
from
'./filter'
Object
.
keys
(
filter
).
forEach
(
k
=>
Vue
.
filter
(
k
,
filter
[
k
]))
...
...
src/main.js
View file @
472d602
import
Vue
from
'vue'
import
'normalize.css/normalize.css'
// A modern alternative to CSS resets
import
'@/assets/css/index.scss'
// global css
// 移动端适配
...
...
@@ -7,7 +6,7 @@ import 'lib-flexible/flexible.js'
import
App
from
'./App'
import
store
from
'./store'
import
router
from
'./router'
import
filters
from
'./filter'
import
filters
from
'./filter
s
'
Vue
.
config
.
productionTip
=
false
new
Vue
({
...
...
src/router/index.js
View file @
472d602
...
...
@@ -14,7 +14,8 @@ export const constantRoutes = [
const
createRouter
=
()
=>
new
Router
({
// mode: 'history', // require service support
mode
:
'history'
,
// require service support
base
:
'/vueapp/'
,
scrollBehavior
:
()
=>
({
y
:
0
}),
routes
:
constantRoutes
})
...
...
vue.config.js
View file @
472d602
...
...
@@ -7,8 +7,37 @@ function resolve(dir) {
const
name
=
defaultSettings
.
title
||
'vue mobile template'
// page title
const
port
=
9018
// dev port
const
externals
=
{
vue
:
'Vue'
,
'vue-router'
:
'VueRouter'
,
vuex
:
'Vuex'
,
vant
:
'vant'
,
axios
:
'axios'
,
'crypto-js'
:
'CryptoJS'
}
// cdn
const
cdn
=
{
// 开发环境
dev
:
{
css
:
[],
js
:
[]
},
// 生产环境
build
:
{
css
:
[
'https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'
],
js
:
[
'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js'
,
'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'
,
'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js'
,
'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'
,
'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js'
,
'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js'
,
'https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js'
]
}
}
module
.
exports
=
{
publicPath
:
'
/'
,
publicPath
:
process
.
env
.
NODE_ENV
===
'development'
?
'/'
:
'/vueapp
/'
,
outputDir
:
'dist'
,
assetsDir
:
'static'
,
lintOnSave
:
process
.
env
.
NODE_ENV
===
'development'
,
...
...
@@ -21,37 +50,53 @@ module.exports = {
errors
:
true
}
},
// css: {
// loaderOptions: {
// postcss: {
// plugins: [
// require('postcss-plugin-px2rem')({
// rootValue: 75, // 换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// // unitPrecision: 5, //允许REM单位增长到的十进制数字。
// // propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
// // propBlackList: [], //黑名单
// exclude: /(node_module)/, // 默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
// // selectorBlackList: [], //要忽略并保留为px的选择器
// // ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
// // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
// mediaQuery: false, // (布尔值)允许在媒体查询中转换px。
// minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
// })
// ]
// }
// }
// },
configureWebpack
:
{
configureWebpack
:
config
=>
{
// 为生产环境修改配置...
if
(
process
.
env
.
NODE_ENV
===
'production'
)
{
// externals里的模块不打包
Object
.
assign
(
config
,
{
name
:
name
,
resolve
:
{
alias
:
{
'@'
:
resolve
(
'src'
)
entry
:[
"@babel/polyfill"
,
"./src/main.js"
],
externals
:
externals
}
)
}
// 为开发环境修改配置...
if
(
process
.
env
.
NODE_ENV
===
'development'
)
{
}
},
// configureWebpack: {
// name: name,
// resolve: {
// alias: {
// '@': resolve('src')
// }
// }
// },
chainWebpack
(
config
)
{
config
.
plugins
.
delete
(
'preload'
)
// TODO: need test
config
.
plugins
.
delete
(
'prefetch'
)
// TODO: need test
// config.entry.app = ["babel-polyfill", resolve('src/main.js')]
// alias
config
.
resolve
.
alias
.
set
(
'@'
,
resolve
(
'src'
))
.
set
(
'assets'
,
resolve
(
'src/assets'
))
.
set
(
'views'
,
resolve
(
'src/views'
))
.
set
(
'components'
,
resolve
(
'src/components'
))
/**
* 添加CDN参数到htmlWebpackPlugin配置中, 详见public/index.html 修改
*/
config
.
plugin
(
'html'
).
tap
(
args
=>
{
if
(
process
.
env
.
NODE_ENV
===
'production'
)
{
console
.
log
(
args
)
args
[
0
].
cdn
=
cdn
.
build
}
if
(
process
.
env
.
NODE_ENV
===
'development'
)
{
args
[
0
].
cdn
=
cdn
.
dev
}
return
args
})
// set preserveWhitespace
config
.
module
.
rule
(
'vue'
)
...
...
@@ -70,7 +115,6 @@ module.exports = {
)
config
.
when
(
process
.
env
.
NODE_ENV
!==
'development'
,
config
=>
{
console
.
log
(
config
)
config
.
plugin
(
'ScriptExtHtmlWebpackPlugin'
)
.
after
(
'html'
)
...
...
Write
Preview
Styling with
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment