用vue-cli建的项目,npm run dev正常加载了index.html,但是加载不了js,无法初始化vue
本文介绍了用vue-cli建的项目,npm run dev正常加载了index.html,但是加载不了js,无法初始化vue的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
- 使用vue-cli建立的项目,将项目与服务器文件放在一起,想通过通过webpack生成的静态文件直接在服务在静态路径中运行.
- 现在通过npm run build 命令直接生成的dist静态文件,直接就可以通过服务器正常运行,但是通过npm run dev命令, 服务器只是加载了index.html文件,没有加载出js文件,导致vue不能初始化,只能看到index.html上的内容.
- 这样做的目的是想方便调试, 并且也是看了其他人的demo也是这样做的,很方便.但是遇到了这个问题,搜索了各种办法都无法解决.
- 自己搜索解决的过程中,觉得应该是配置问题, 但是始终没有解决,所在来这里请教下大家,先谢过了.
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屋!
查看全文