JavaScript/vue.js/error

来自康健生活
跳到导航 跳到搜索

标题文字

  • Cannot assign to read only property 'exports' of object '#<Object>'
    js 可以混用 require、export。但是不能混用import、module.exports
  • Unknown custom element: <el-menu> - did you register the component correctly
    没有引用 element-ui
    import ElementUI from 'element-ui'; //element-ui的全部组件
    Vue.use(ElementUI); //使用elementUI
    
  • Invalid prop: type check failed for prop "collapseTransition". Expected Boolean, got String with value "false".
    类型错误,加:即可
    :collapse-transition="false"
    
  • TypeError: Cannot read property 'openedMenus' of undefined,在使用 elementui 时出现错误,按需子组件 vue 页面加载即可
    import {Menu, Submenu, MenuItem, MenuItemGroup} from 'element-ui';
    Vue.use(Menu);
    Vue.use(Submenu);
    Vue.use(MenuItem);
    Vue.use(MenuItemGroup);
    
  • Unknown custom element: <el-menu> - did you register the component correctly? For recursive components, make sure to provide the "name" option
    耗时 5 个小时,试过多个 webpack 方案,经过仔细爬坑,是因为 vue 与 ejs 不兼容导致的(vue-loader 与 html-webpack-plugin 和 ejs-compiled-loader),将 ejs 解析器 替换回 ejs-loader(vue-loader 与 html-webpack-plugin 和 ejs-loader)即可,但是这样就不能使用 ejs 嵌套标签
    更正,并不是 (vue-loader 与 html-webpack-plugin 和 ejs-compiled-loader)不兼容,而是重复引入多个 elementui 导致错误
  • Do not use built-in or reserved HTML elements as component id: Header
    模板插入到 DOM 中的标签名须能够被 DOM 正确地解析需要避免完全不合法的标签名
  • vue.esm.js:628 [Vue warn]: Failed to mount component: template or render function not defined.found in---> <Anonymous> <App> at view/index/app.vue <Root>
    路由文件里面改 import Vue from 'vue'; 为 import Vue from 'vue/dist/vue.common.js';
  • <router-view> 内容不渲染问题
    <router-view class="index" name="NavMenu"></router-view> 改为 <router-view></router-view>,如果一定使用 name(路由命名),name 要与 router.js 内的组件名称一致,是components 而不是 component
    export default new Router({
        routes: [
            {
                path: '/',
                components: {NavMenu: NavMenu},
                children:[]
            }
        ]
    })
    
  • [Vue warn]: Invalid prop: type check failed for prop "index". Expected String, got Number.
    使用强制类型转换技巧 <el-submenu :index="item.id+"> 转换数据类型
  • css 样式抽取极其不稳定,只显示 /*# sourceMappingURL=index_page_script.css.map*/。现在遇到的问题是 MiniCssExtractPlugin.loader 可以提取 css 文件打包使用 link 标签插入,或者 vue-style-loader 抽离 vue 文件中的 css 用 style 标签插入
 其中 FixStyleOnlyEntriesPlugin 组件一定要与 MiniCssExtractPlugin 同步使用,不然会把 css 的 js 文件删除,导致 css 文件无法插入文本。
  • elementui 更改样式无效,修改 css 标签,去掉 scoped
    <style lang="scss" rel="stylesheet/scss" scoped>
    
  • Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead
    <template>
        <div>
            <router-view name="default"></router-view>
            <router-view name="index_main"></router-view>
            <router-view name="info_main"></router-view>
            <router-view name="list_main"></router-view>
        </div>
    </template>
    
  • Vue warn]: Error in render: "TypeError: Cannot read property 'key' of undefi
    元素加上v-if 指令,判断这个数组中是否有内容,警告即可解除
    <div v-if="BospitalSearchFilters[0]">
                <span class="sub-nav-title" :value="BospitalSearchFilters[0].key">{{BospitalSearchFilters[0].title}}:</span>
    
  • 页面在手机浏览器报错 Failed to load resource: net::ERR_NAME_NOT_RESOLVED
    axios在部分手机的微信浏览器中无法发起请求
    尝试解决给服务器添加目标网站 host,这个问题确切说不是手机浏览器不能发送请求,而是手机本地没有设置代理(电脑开发机通过修改 /etc/hosts 可以发送请求)。
  • 手机端浏览器 Uncaught (in promise) Error: Network Error
    先确定问题在哪里
    axios.get('/disease/footer_recommend').then((req) => {
      _self.Disease_footer_recommend = req.data.data;
    }).catch((error)=>{
      console.log(error);
      _self.errorMessage = error;
    });
    

Error: Network Error at e.exports (spread.js:25) at XMLHttpRequest.l.onerror (spread.js:25)

  • 这个问题源于 我设置的 axios.defaults.baseURL='http://localhost:3000';,网络请求地址指向了开发机自己,当用其他机器测试时请求地址指向测试机地址,所以抛错。
  • 解决办法分三步
  • package.json
"sshbuild": "export NODE_ENV=production HOST=152.32.132.166 && webpack --mode production --config webpack.config.js",
  • webpack.config.js
const AXIOSHOST = process.env.HOST;
/**
 * 配置全局常量
 */
new webpack.DefinePlugin({
  'axios_host':JSON.stringify(AXIOSHOST),
}),
  • router/index.js
axios.defaults.baseURL='http://'+axios_host+':3000';