1
私は単純なVue.jsアプリをCordovaに実装するのに苦労しています。私はどのように私のvueアプリケーションにコードワーカーのイベント（deviceready、一時停止、...）を傍受することができないか分からない限り、すべて正常に動作します。 vue-cliのWebpackテンプレートを使用しました。Vue js in cordova
const app = {
initialize: function() {
console.log('initialize')
this.bindEvents()
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false)
},
onDeviceReady: function() {
app.receivedEvent('deviceready')
},
receivedEvent: function (id) {
console.log('Received Event: ' + id)
}
}
app.initialize()
src/main.js：
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
const app = new Vue({
template: '<App/>',
components: { App }
})
app.$mount('#app')
のconfig/index.js：
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
//assetsPublicPath: '/',
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css']
},
dev: {
env: require('./dev.env'),
port: 8080,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
cssSourceMap: false
}
}
webpack.base.conf.js：
は、ここに私のファイルjs/index.jsです
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue', '.json'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
plugins: [
new webpack.ProvidePlugin({
// jquery
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
semantic: 'semantic-ui-css',
'semantic-ui': 'semantic-ui-css'
})
],
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
eslint: {
formatter: require('eslint-friendly-formatter')
},
vue: {
loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
}
webpack.prod.conf：
var webpackConfig = merge(baseWebpackConfig, {
module: {
loaders: 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')
},
vue: {
loaders: utils.cssLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurrenceOrderPlugin(),
// extract css into its own file
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
// 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,
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'
}),
// 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']
})
]
})
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
})
)
}
そして、ここでは私のプロジェクト構造です：
私はVueのコンポーネントにコルドバからイベントを取得するために何をするshoud？
どのようなエラーが発生していますか？これらの2つのアプリのバーは互いに矛盾していますか？ –
私は何のエラーも受けていませんが、私は 'deviceready'イベントを手に入れません。私がしなければならないことは、 'deviceready'イベントを受け取ったとき、私は自分のVueアプリケーションをインスタンス化しますが、イベントは一度も発生しません –
' index.js'または 'main.js'が最初にページにロードされていますか？物理デバイスまたはブラウザでこれを実行していますか（cordova.jsを組み込むには、デバイス上でコードバのコンパイルプロセスが必要です）。あなたのcordovaの初期化コードを動かそうとしていますが、これを知っていればコードカーネルの初期化コードはコンソールにしか印刷されていません（Vueを初期化していません）。また、一般的にapp/index/mainのすべてを名前にするのは悪い考えです。 –