用vue-cli建的项目,npm run dev正常加载了index.html,但是加载不了js,无法初始化vue

查看:775
本文介绍了用vue-cli建的项目,npm run dev正常加载了index.html,但是加载不了js,无法初始化vue的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

  1. 使用vue-cli建立的项目,将项目与服务器文件放在一起,想通过通过webpack生成的静态文件直接在服务在静态路径中运行.
  2. 现在通过npm run build 命令直接生成的dist静态文件,直接就可以通过服务器正常运行,但是通过npm run dev命令, 服务器只是加载了index.html文件,没有加载出js文件,导致vue不能初始化,只能看到index.html上的内容.
  3. 这样做的目的是想方便调试, 并且也是看了其他人的demo也是这样做的,很方便.但是遇到了这个问题,搜索了各种办法都无法解决.
  4. 自己搜索解决的过程中,觉得应该是配置问题, 但是始终没有解决,所在来这里请教下大家,先谢过了.

webpack.base.conf.js的配置,没有修改过

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath

  },

config中index.js 将请求转到本地服务3001端口的配置

proxyTable: {
      '/': {
        target: 'http://localhost:3001/',
        changeOrigin: true
      } 
    }

index.html文件,主要是引用了一个app.js文件, 我感觉是这个路径的问题

<html>
  <head>
    <meta charset="utf-8">
    <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>my-os</title>
  </head>
  <body>
    <div id="app"></div>
    <p>说明加载到首页</p>
    <!-- built files will be auto injected -->
    <script src="dist/static/js/app.js"></script>
  </body>
</html>

node.js服务器中的一段代码

app.get('*', function (req, res) {
  let html = fs.readFileSync(resolve('./' + 'index.html'), 'utf-8')
  console.log()
  res.send(html)
})

我的目的是想通过dev命令,也可以正常访问本地服务器.

解决方案

问题没有真正解决, 重新命名用vue-cli 创建 webpack-simple项目, 可达到所需要的效果. 后面在花时间认真学习下webpack, 再来解决这个问题

这篇关于用vue-cli建的项目,npm run dev正常加载了index.html,但是加载不了js,无法初始化vue的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆