鍍金池/ 問(wèn)答/HTML5  網(wǎng)絡(luò)安全  HTML/ vue-cli打包之后資源都加載正常,可就是不加載組件,什么原因???

vue-cli打包之后資源都加載正常,可就是不加載組件,什么原因???

(已解決)服務(wù)器輸出的app文件路徑和vuerouter配置里面的一一對(duì)應(yīng)才行

vue-cli打包之后,頁(yè)面的js在控制臺(tái)都可以看到有內(nèi)容返回,頁(yè)面也沒(méi)有任何的報(bào)錯(cuò),可就是不加載組件出來(lái)效果,什么原因???
服務(wù)器上返回的頁(yè)面也有(往下看圖,有app.vue的靜態(tài)html)

我實(shí)在是無(wú)招可用了,求指教

ps:網(wǎng)上搜了一堆都是說(shuō)改webpack的config/index.js,吧“/”改成“./”我也改了,打包出來(lái)的效果一樣,還有的說(shuō)吧mode: 'history'注釋掉,我也注釋了,打包依舊,什么情況???懵逼中……
圖片描述
圖片描述
圖片描述
圖片描述
圖片描述
圖片描述
圖片描述
圖片描述
圖片描述

回答
編輯回答
厭惡我

由于沒(méi)有報(bào)錯(cuò),我自己猜八成是路徑問(wèn)題,最后賭了一手路徑,試著改了router/router.js下的base: "路徑",改成和服務(wù)器輸出的路徑一樣,最后出來(lái)效果了。
服務(wù)器輸出的是http://localhost:3000/admin/main.html(這是app的內(nèi)容),對(duì)應(yīng)的base選項(xiàng)填上/admin/main.html

2017年12月12日 12:26
編輯回答
下墜

謝邀.先看一遍問(wèn)題.
剛看完問(wèn)題情況,然后拷貝了一份新建的項(xiàng)目來(lái)測(cè)試.并沒(méi)有復(fù)現(xiàn)你所說(shuō)的情況...
以下是router.js

import Vue from 'vue'
import Router from 'vue-router'

const index = () => import(/* webpackChunkName: "group-index" */ '@/page/index.vue')
// import index from '@/page/index.vue'
import home from '@/page/home.vue'
import proof_company from '@/page/proof_company.vue'
import proof_huji from '@/page/proof_huji.vue'
import proof_salary from '@/page/proof_salary.vue'
import printSettings from '@/page/printSettings.vue'
import printProgress from '@/page/printProgress.vue'
import makeCard from '@/page/makeCard.vue'
import rate from '@/page/rate.vue'
import admin from '@/page/admin.vue'
Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      redirect: '/index'
    },
    {
      path: '/index',
      component: index
    },
    {
      path: '/admin',
      component: admin
    },
    {
      path: '/home',
      component: home,
      children: [{
          path: 'proof_company',
          component: proof_company,
        },
        {
          path: 'proof_huji',
          component: proof_huji,
        },
        {
          path: 'proof_salary',
          component: proof_salary,
        },
        {
          path: 'printSettings',
          component: printSettings,
        },
        {
          path: 'printProgress',
          component: printProgress,
        },
        {
          path: 'makeCard',
          component: makeCard,
        },
        {
          path: 'rate',
          component: rate,
        }
      ]
    }
  ]
})

以下是config/index.js的build部分

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

以下是index.vue部分

<style lang="less" scoped>
.csot_wrapper {
  width:900px;
  height:600px;
  background-color: pink;
}
</style>
<template>
  <div class="csot_wrapper">
    test words
  </div>
</template>
<script>
export default {
  //props:{
    //props:{
      //type:String,
      //default:String,
    //},
  //},
  //data () {
    //return {
    //}
  //},
  //methods:{
    //example(){
      ////dosth
    //},
  //},
  //computed:{
    //computedA(){
      //return xxx
    //},
  //},
  //watch:{
    //watchA(val,oldval){//必須是data||props里面已經(jīng)有的key才行,普通值
      ////dosth
    //},
    //watchB:{//必須是data||props里面已經(jīng)有的key才行,對(duì)象obj
      //deep:true,
      //handler(val,oldval){
        ////dosth
      //}
    //},
  //},
  created () {
    console.log('index.vue created' +  +new Date())
  },
  //mounted () {
  //},
  //beforeDestroy () {
  //},
  //beforeRouteEnter(to, from, next) {
    //next(vm => {
      //// 通過(guò) `vm` 訪問(wèn)組件實(shí)例
    //});
  //},
  //beforeRouteLeave(to, from, next){
    //// dosth 可以用this訪問(wèn)當(dāng)前組件上下文
    //next();
   //},
}
</script>

...得,官網(wǎng)上有注明 ,我去看了下我的依賴

注意
如果您使用的是 Babel,你將需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正確地解析語(yǔ)法。
    "babel-plugin-syntax-jsx": "^6.18.0"
2017年12月29日 15:45
編輯回答
詆毀你

謝邀~
沒(méi)看懂你說(shuō)的不加載組件。不加載什么組件?
你是怎么引入或者說(shuō)加載這個(gè)組件的。
動(dòng)態(tài)引入?
還是直接引入?
還是其他方式呢

2018年5月20日 05:34
編輯回答
憶當(dāng)年

這種問(wèn)題我也是遇到??偨Y(jié)起來(lái)了試了三種都不起作用。最后是因?yàn)樵诼酚芍刑砑恿薽ode處理導(dǎo)致build后app沒(méi)掛上

clipboard.png
clipboard.png
clipboard.png
clipboard.png

2018年2月18日 14:08