【Vue】从量子链网页钱包看vue项目结构以及开发部署最佳实践
项目介绍
qtum-web-wallet 是量子链推出的网页版钱包。
项目地址 https://github.com/qtumproject/qtum-web-wallet
项目采用vue搭建。
通过网页可以实现钱包的创建备份转账以及智能合约的部署调用功能。
项目结构
这个vue项目采用了vue-loader,所以整体用的是嵌套结构。
- build 构建脚本，还包括开发时候用的服务器配置
- config 项目环境配置，区分开发环境和生产环境
- dist 项目编译后导出的文件，部署生产环境的时候会用到
- docs 项目内的说明文档，跟代码无关
- src
- assets 项目资源文件
- components vue的组件文件，可以重复使用
- controllers 对应项目的每个逻辑页面
- libs 项目用到的封装的函数库
- locales i18n国际化用到的语言字库文件
一些技术点
vue-i18n 国际化
官方文档的操作见后面的参考资料。
下面看这个项目是怎么做的。
引入库和配置文件
package.json 中的devDependencies引入"vue-i18n": "^7.4.2"
Vue.js中引入import i18n from 'libs/i18n'
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locales from 'locales'
import config from 'libs/config'
Vue.use(VueI18n)
export default new VueI18n({
locale: config.getLan(),
fallbackLocale: 'zh',
messages: locales.messages,
})
展示内容
在模板中，写法为{{ $t('create.title') }}
获取配置
src/lib/config.js
getLan() {
let locale = this.get('lan')
navigator.languages.forEach(language => {
if (locale === undefined && locales.locales.indexOf(language) !== -1) {
locale = language
}
})
if (locale === undefined) {
locale = 'en'
}
return locale
},更改配置
src/controllers/Config.vue
save: function() {
config.set('lan', this.lan)
config.set('network', this.network)
config.set('mode', this.mode)
window.location.reload()
}build 构建项目
package.json中
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},会执行node build/build.js
require('./check-versions')() //引入版本检测文件
process.env.NODE_ENV = 'production' //设定为生产模式
var ora = require('ora') //引入ora
var rm = require('rimraf') //node的rm -rf ，删除文件
var path = require('path')
var chalk = require('chalk') //Log格式工具可以指定颜色什么的
var webpack = require('webpack') //打包工具
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
ora，就是build的时候那个会动的图标。 
重点还是在生产环境的文件中
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var FaviconsWebpackPlugin = require('favicons-webpack-plugin')
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[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
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true,
mangle: {
except: ['BigInteger', 'ECPair', 'Point']
}
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
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: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: 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'
}),
new FaviconsWebpackPlugin({
logo: 'assets/images/logo.png',
inject: true,
title: 'Qtum Web Wallet',
icons: {
android: true,
appleIcon: true,
appleStartup: false,
favicons: true
}
}),
// keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
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',
chunks: ['vendor']
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
开发阶段和部署生产环境
开发阶段
本地安装
xiaoyu@LIXIAOYUdeMacBook-Pro.com➤ npm install
> fsevents@1.1.2 install /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/fsevents
> node install
[fsevents] Success: "/xiaoyu/qtumprojects/qtum-web-wallet/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> phantomjs-prebuilt@2.1.15 install /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt
> node install.js
PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-macosx.zip
Saving to /var/folders/p6/3j5thk4j0972fw32188xdns80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
Receiving...
[========================================] 100%
Received 16746K total.
Extracting zip contents
Removing /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt/lib/phantom
Copying extracted folder /var/folders/p6/3j5thk4j0972fw32188xdns80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1520400588975/phantomjs-2.1.1-macosx -> /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
added 1220 packages in 685.142s运行，注意开发阶段跑的是dev
/xiaoyu/qtumprojects/qtum-web-wallet git:(master) [13:51:56]
[email protected]➤ npm run dev
> qtum-wallet@1.0.0 dev /xiaoyu/qtumprojects/qtum-web-wallet
> node build/dev-server.js
> Starting dev server...
WARNING Compiled with 1 warnings 1:54:48 PM
warning in ./src/controllers/RestoreMobile.vue
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.
@ ./src/controllers/RestoreMobile.vue 7:0-357
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
> Listening at http://localhost:8081部署生产环境
开发环境的dev,运行的是项目自带的服务器，并且只要有文件更改，就会刷新，对于开发来讲很方便。
但是，上面运行着大量的辅助工具，导致整个项目运行的速度会变慢。
/xiaoyu/qtumprojects/qtum-web-wallet git:(master *) [14:10:39]
[email protected]➤ npm run build
> qtum-wallet@1.0.0 build /xiaoyu/qtumprojects/qtum-web-wallet
> node build/build.js
⠦ building for production...
Starting to optimize CSS...
Processing static/css/app.f1e81e8b885d40d5da38b1583c218b18.css...
Processed static/css/app.f1e81e8b885d40d5da38b1583c218b18.css, before: 301826, after: 301758, ratio: 99.98%
Hash: c444e4b2e6127e14174b
Version: webpack 2.7.0
Time: 38636ms
Asset Size Chunks Chunk Names
static/js/vendor.6b97dce258230f7e63ba.js 1.05 MB 0 [emitted] [big] vendor
static/js/app.6d3e646af7951a9ecaab.js 226 kB 1 [emitted] app
static/js/manifest.fb70284a5dffe96a9b58.js 1.51 kB 2 [emitted] manifest
static/css/app.f1e81e8b885d40d5da38b1583c218b18.css 302 kB 1 [emitted] [big] app
static/js/vendor.6b97dce258230f7e63ba.js.map 6.25 MB 0 [emitted] vendor
static/js/app.6d3e646af7951a9ecaab.js.map 848 kB 1 [emitted] app
static/css/app.f1e81e8b885d40d5da38b1583c218b18.css.map 351 kB 1 [emitted] app
static/js/manifest.fb70284a5dffe96a9b58.js.map 14.6 kB 2 [emitted] manifest
index.html 2.09 kB [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.bulid之后的，将dist文件夹内的文件放到http服务器，比如apache nginx .就可以了。
参考资料
- https://github.com/qtumproject/qtum-web-wallet
- http://blog.csdn.net/sllailcp/article/details/78595077
- https://vue-loader.vuejs.org/zh-cn/
- https://kazupon.github.io/vue-i18n/en/
- https://github.com/sindresorhus/ora
- https://github.com/isaacs/rimraf
- https://www.npmjs.com/package/chalk
- http://zhaoda.net/webpack-handbook/install.html