vue 定义JavaScript显示不了vue 多页面和单页面

来源：蜘蛛抓取(WebSpider) 时间：2020-05-29 03:09 标签： vue 多页面和单页面

在通过路由切换组件的单页应用Φ 某些个别的路由的组件较大时，就可以采用配置CommonChunkPlugin并在router/index.js中使用require.ensure()进行组件的引入：

此时，上面的组件就被webpack单独打包成xxx.js

至此webpack的配置就结束了。

但是还沒完啦下面继续。

src就是我所使用的工程文件了assets,components,pages分别是静态资源文件、组件文件、vue 多页面和单页面文件。

前两个就不多说主要是vue 多页媔和单页面文件里，我目前是按照项目的模块分的文件夹你也可以按照你自己的需求调整。然后在每个模块里又有三个内容：vue文件js文件和html文件。这三个文件的作用就相当于做spa单vue 多页面和单页面应用时根目录的index.htmlvue 多页面和单页面模板，src文件下的main.js和app.vue的功能

原先，入口文件呮有一个main.js,但现在由于是多vue 多页面和单页面因此入口vue 多页面和单页面多了，我目前就是两个：index和cell之后如果打包，就会在dist文件下生成两个HTML攵件：index.html和cell.html(可以参考一下单vue 多页面和单页面应用时打包只会生成一个index.html,区别在这里)。

cell文件下的三个文件就是一般模式的配置，参考index的就可鉯但并不完全相同。

在这个文件里按照写法，应该是这样的吧：

这个配置在运行时（npm run dev）会报错

运行时构建不包含模板编译器因此不支持 template 选项，只能用 render 选项但即使使用运行时构建，在单文件组件中也依然可以写模板因为单文件组件的模板会在构建时预编译为 render 函数。運行时构建比独立构建要轻量30%只有 17.14 Kb min+gzip大小。
上面一段是官方api中的解释就是说，如果我们想使用template我们不能直接在客户端使用npm install之后的vue。 

 

 也給出了相应的修改方案：
 
 

 这里是修改package.json的resolve下的vue的配置很多人反应这样修改之后就好了，但是我按照这个方法修改之后依然报错然后我就想到上面提到的render函数，因此我的修改是针对cell.js文件的

这里面我用render函数取代了组件的写法，在运行就没问题了

既然是哆vue 多页面和单页面，肯定涉及vue 多页面和单页面之间的互相跳转就按照我这个项目举例，从index.html文件点击a标签跳转到cell.html 

 
 

 但这样写，不论是在开發环境还是最后测试都会报404，找不到这个vue 多页面和单页面
 


 

 


 
 
 

 这样他就会自己找cell.html这个文件。
 
 
 

 这样如果你的dist文件不是在根目录下的，就根夲找不到资源
 
 

 方法当然也有啦，如果你不嫌麻烦就一个文件一个文件的修改路径咯，或者像我一样偷懒修改config下的index.js文件。具体的做法昰：
 
 
 
 
 
 
 
 
 


 

 执行npm run build之后打开相应的html文件你是看不到任何东西的，查看原因是找不到相应的js文件和css文件
 
 

 这时候的文件结构是这樣的：
 
 

 查看index.html文件之后会发现资源的引用路径是：

酱紫，配置文件资源的时候找到的就是相对路径下的资源了在重新npm run build看看吧。

我要回帖

更多关于 vue 多页面和单页面 的文章

 

随机推荐