mpvue-entry
mpvue-entry copied to clipboard
F-loat
哥有没有适配mpvue2.0的计划
最新版支持 mpvue2.0 的，使用中具体有什么问题吗
哥，报错 const importNode = astPath.node.specifiers[0].local; ^
TypeError: Cannot read property 'local' of undefined
用的官方最新的quickstart 然后接你的报错
@F-loat @fengzhiqiang012 可以帮忙看看么？不支持mpvue2.0.0，报错：未找到入口页面app.json 中定义的 pages : [] 下面是main.js
import Vue from 'vue'
import store from '@/store'
import App from '@/App'
import './sass/comm.scss'
Vue.config.productionTip = false
Vue.prototype.$store = store
const app = new Vue({
// store,
...App
})
app.$mount()
下面是webpack.base.conf.js
var path = require('path')
var fs = require('fs')
var utils = require('./utils')
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var vueLoaderConfig = require('./vue-loader.conf')
var MpvuePlugin = require('webpack-mpvue-asset-plugin')
var glob = require('glob')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var relative = require('relative')
const MpvueEntry = require('mpvue-entry')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
function getEntry (rootSrc) {
var map = {};
glob.sync(rootSrc + '/pages/**/main.js')
.forEach(file => {
var key = relative(rootSrc, file).replace('.js', '');
map[key] = file;
})
return map;
}
const appEntry = { app: resolve('./src/main.js') }
const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
const entry = Object.assign({}, appEntry, pagesEntry)
let baseWebpackConfig = {
// 如果要自定义生成的 dist 目录里面的文件路径，
// 可以将 entry 写成 {'toPath': 'fromPath'} 的形式，
// toPath 为相对于 dist 的路径, 例：index/demo，则生成的文件地址为 dist/index/demo.js
entry: MpvueEntry.getEntry('src/pages.js'),
target: require('mpvue-webpack-target'),
output: {
path: config.build.assetsRoot,
jsonpFunction: 'webpackJsonpMpvue',
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue': 'mpvue',
'@': resolve('src'),
'flyio': 'flyio/dist/npm/wx',
'wx': resolve('src/api/wx')
},
symlinks: false,
aliasFields: ['mpvue', 'weapp', 'browser'],
mainFields: ['browser', 'module', 'main']
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'mpvue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
include: [resolve('src'), resolve('test')],
use: [
'babel-loader',
{
loader: 'mpvue-loader',
options: Object.assign({checkMPEntry: true}, vueLoaderConfig)
},
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[ext]')
}
}
]
},
plugins: [
new MpvueEntry(),
// api 统一桥协议方案
new webpack.DefinePlugin({
'mpvue': 'global.mpvue',
'mpvuePlatform': 'global.mpvuePlatform'
}),
new MpvuePlugin(),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: path.resolve(config.build.assetsRoot, './static'),
ignore: ['.*']
}
])
]
}
// 针对百度小程序，由于不支持通过 miniprogramRoot 进行自定义构建完的文件的根路径
// 所以需要将项目根路径下面的 project.swan.json 拷贝到构建目录
// 然后百度开发者工具将 dist/swan 作为项目根目录打
const projectConfigMap = {
tt: '../project.config.json',
swan: '../project.swan.json'
}
const PLATFORM = process.env.PLATFORM
if (/^(swan)|(tt)$/.test(PLATFORM)) {
baseWebpackConfig = merge(baseWebpackConfig, {
plugins: [
new CopyWebpackPlugin([{
from: path.resolve(__dirname, projectConfigMap[PLATFORM]),
to: path.resolve(config.build.assetsRoot)
}])
]
})
}
module.exports = baseWebpackConfig
看下 readme，[email protected] 调整了下这个文件的格式
感谢大神！修改了入口为app.json，已经ok了，多谢多谢！
能把你配置的给我看下吗？我也是你之前的问题，可是我改了入口为app.json，直接不能编译
webpack.base.conf.js var path = require('path') var fs = require('fs') var utils = require('./utils') var config = require('../config') var webpack = require('webpack') var merge = require('webpack-merge') var vueLoaderConfig = require('./vue-loader.conf') var MpvuePlugin = require('webpack-mpvue-asset-plugin') var glob = require('glob') var CopyWebpackPlugin = require('copy-webpack-plugin') var relative = require('relative') const MpvueEntry = require('mpvue-entry') function resolve (dir) { return path.join(__dirname, '..', dir) } // // function getEntry (rootSrc) { // var map = {}; // glob.sync(rootSrc + '/pages/**/main.js') // .forEach(file => { // var key = relative(rootSrc, file).replace('.js', ''); // map[key] = file; // }) // return map; // } // // const appEntry = { app: resolve('./src/app.json') } // const pagesEntry = MpvueEntry.getEntry('./src/router/index.js') // const entry = Object.assign({}, appEntry, pagesEntry)
let baseWebpackConfig = { // 如果要自定义生成的 dist 目录里面的文件路径， // 可以将 entry 写成 {'toPath': 'fromPath'} 的形式， // toPath 为相对于 dist 的路径, 例：index/demo，则生成的文件地址为 dist/index/demo.js // entry, entry: MpvueEntry.getEntry('src/app.json'), target: require('mpvue-webpack-target'), output: { path: config.build.assetsRoot, jsonpFunction: 'webpackJsonpMpvue', filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue': 'mpvue', '@': resolve('src') }, symlinks: false, aliasFields: ['mpvue', 'weapp', 'browser'], mainFields: ['browser', 'module', 'main'] }, module: { rules: [ { test: /.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, { test: /.vue$/, loader: 'mpvue-loader', options: vueLoaderConfig }, { test: /.js$/, include: [resolve('src'), resolve('test')], use: [ 'babel-loader', { loader: 'mpvue-loader', options: Object.assign({checkMPEntry: true}, vueLoaderConfig) }, ] }, { test: /.(png|jpe?g|gif|svg)(?.)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[ext]') } }, { test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(?.)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[ext]') } } ] }, plugins: [ // api 统一桥协议方案 new webpack.DefinePlugin({ 'mpvue': 'global.mpvue', 'mpvuePlatform': 'global.mpvuePlatform' }), new MpvuePlugin(), new MpvueEntry(), // new CopyWebpackPlugin([{ // from: '**/.json', // to: '' // }], { // context: 'src/' // }), new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: path.resolve(config.build.assetsRoot, './static'), ignore: ['.*'] } ]) ] }
// 针对百度小程序，由于不支持通过 miniprogramRoot 进行自定义构建完的文件的根路径 // 所以需要将项目根路径下面的 project.swan.json 拷贝到构建目录 // 然后百度开发者工具将 dist/swan 作为项目根目录打 const projectConfigMap = { tt: '../project.config.json', swan: '../project.swan.json' }
const PLATFORM = process.env.PLATFORM if (/^(swan)|(tt)$/.test(PLATFORM)) { baseWebpackConfig = merge(baseWebpackConfig, { plugins: [ new CopyWebpackPlugin([{ from: path.resolve(__dirname, projectConfigMap[PLATFORM]), to: path.resolve(config.build.assetsRoot) }]) ] }) }
module.exports = baseWebpackConfig
pages.js
module.exports = [ { path: 'pages/index/index', name: 'Index', config: { navigationBarTitleText: 'zhuye' } }, { path: 'pages/test1/index', name: 'Test1', config: { navigationBarTitleText: 'list详情', usingComponents: { 'i-button': '../../static/iview/button/index' } } }, { path: 'pages/list/index', name: 'List', config: { navigationBarTitleText: 'zzzzzzz7777' } } ]
我的package.json里的 mpvue-loader: '^2.0.0' "mpvue-entry": "^1.5.9" 还需要什么？我提供 或者哪位大神QQ发给我 指导我一下
@muzixiaojun 用最新版的 mpvue-entry
大神 按照你说的 最新版了，然后是编译起来了，可是报 出现脚本错误或者未正确调用 Page()
我用是用官方mvpue-cli 搭建的项目。里面的webpack-mpvue-asset-plugin："^2.0.0"，应该是最新版本的把。我也把node_modules全删了，重装，问题还是没有解决
@zjydipingxian 官方的模板吗，你依赖安装有问题吧
是官方模板搭建， 使用此版本npm i mpvue-entry@next -D， 作者如果方便可以加下我QQ？ 方便沟通 1036432890
@zjydipingxian 你这个是缺依赖，再执行下
npm i看看，有多平台需求的话推荐你用 uni-app 吧，配置也相对简便很多
我装了这样呀，就是装了这个我启动不了，现在不考虑多平台。
@zjydipingxian 你这个是缺依赖，再执行下
npm i看看，有多平台需求的话推荐你用 uni-app 吧，配置也相对简便很多
最新版支持 mpvue2.0 的，使用中具体有什么问题吗
哥，报错 const importNode = astPath.node.specifiers[0].local; ^
TypeError: Cannot read property 'local' of undefined
用的官方最新的quickstart 然后接你的报错
我使用mixin 也报这个错了， 你咋解决的？
import Vue from 'vue'
import App from '@/App'
import store from '@/store'
import MpvueRouterPatch from 'mpvue-router-patch'
import request from './utils/request'
import './style/common'
Vue.use(MpvueRouterPatch)
Vue.prototype.$store = store
Vue.prototype.$request = request
Vue.mixin({
computed: {
$miniAppName: function() {
return process.env.PROJECT_NAME
},
$miniStaticBase: function() {
return process.env.STATIC_RESOURCE_LOCATION
}
}
})
const app = new Vue(App)
app.$mount()
加了 Vue.mixin({}) 就报错了
> [email protected] start C:\workspace\my\mpvue-basic
> node build/dev-server.js
C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\lib\parser\template.js:10
const importNode = astPath.node.specifiers[0].local;
^
TypeError: Cannot read property 'local' of undefined
at enter (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\lib\parser\template.js:10:55)
at NodePath._call (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\path\context.js:53:20)
at NodePath.call (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\path\context.js:40:17)
at NodePath.visit (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\path\context.js:88:12)
at TraversalContext.visitQueue (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\context.js:118:16)
at TraversalContext.visitMultiple (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\context.js:85:17)
at TraversalContext.visit (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\context.js:144:19)
at Function.traverse.node (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\index.js:94:17)
at NodePath.visit (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\path\context.js:95:18)
at TraversalContext.visitQueue (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\context.js:118:16)
at TraversalContext.visitSingle (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\context.js:90:19)
at TraversalContext.visit (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\context.js:146:19)
at Function.traverse.node (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\index.js:94:17)
at traverse (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\node_modules\@babel\traverse\lib\index.js:76:12)
at removeImportBySpecifier (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\lib\parser\template.js:7:3)
at CallExpression (C:\workspace\my\mpvue-basic\node_modules\mpvue-entry\lib\parser\template.js:71:9)
npm ERR! code ELIFECYCLE
vue init F-loat/mpvue-quickstart my-project生成的项目引用其他文件报错
放在app.vue也是出错，放在main.js把css后缀去掉就不会报错
main.js 发一下
解决了，少了个依赖 感谢感谢
同问少了什么依赖
不记得了，好久远的问题了， 这年代不合适用mpvue了， 兄弟 建议用别的
main.js 发一下
解决了，少了个依赖 感谢感谢
同问少了什么依赖
不记得了，好久远的问题了， 这年代不合适用mpvue了， 兄弟 建议用别的
好的 谢谢 我是用原生的，接手别人一个mpvue的项目，配置都整半天...
main.js 发一下
解决了，少了个依赖 感谢感谢
同问少了什么依赖
不记得了，好久远的问题了， 这年代不合适用mpvue了， 兄弟 建议用别的
好的 谢谢 我是用原生的，接手别人一个mpvue的项目，配置都整半天... 下面是我之前的main.js
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'
import App from '@/App'
import store from '@/store'
//全局变量
import prototype from '../src/js/prototype'
//全局组件
import headComponent from "./components/global/headComponent";
import footComponent from "./components/global/footComponent";
import transparentHead from "./components/global/transparentHead";
import message from "./components/global/message";
//全局常量
import '@/js/prototype'
Vue.use(MpvueRouterPatch)
Vue.use(prototype)
Vue.config.productionTip = false
//mockjs
import useMock from './mock/mock'
useMock(false)
//mixins
/*import mixins from "./js/mixins";
console.log(27, mixins)
Vue.mixin({
mounted(){
console.log('666')
}
})*/
Vue.component('headComponent', headComponent)
Vue.component('footComponent', footComponent)
Vue.component('transparentHead', transparentHead)
Vue.component('message', message)
const app = new Vue({
mpType: 'app',
store,
...App
})
app.$mount()