vue-webpack 做出来的项目部署到服务器上，点开是空白页（我这里把项目发布到git上）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

总结1: 从网上下的很多demo，用npm run dev 就可以启动项目，比如：vue-cli，为什么？因为vue-cli自动帮我们安装了express服务器。

总结2: npm run dev 是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外）。意思就是npm这些东西和服务端的部署没有一点关系！

1.迟迟不敢动vue-webpack

因为本地使用vue-webpack开发时(使用的vue-cli，人家都配好了)，本地还要运行npm run dev ,我就想着，这要是部署到服务器上，不也得npm run dev？？

看了http://www.cnblogs.com/zhuzhenwei918/p/6866094.html，这篇神作，才明白，不是我以为的就是我以为的！

其实只要把本地npm run build 出来的dist文件夹下的static文件夹和index.html，上传到服务器就行了。

是的你没看错，dist这个文件夹就是npm run build 这个命令出来的，不信你删了dist文件夹，执行一次 npm run build。

好了，上传上去了，打开git发布好的地址。https://chenguangliang.github.io/vue-webpack-deploy/ （别用谷歌浏览器在git仓库中找这个地址，不显示）

什么？空白页！看到comsole里的错，肯定是路径出问题了。

是的，路径中少了一个vue-webpack-deploy 路径，

解决办法：

1.手动改index.html

<script type="text/javascript" src="./static/js/app.js"></script>
或者
<script type="text/javascript" src="/hot/static/js/app.js"></script>
推荐这样的方式，可以保正在vue-router生成的url下也不出现问题

2.在config中的index.js下修改webpack配置：记住是修改 build 里的下面这些参数，不是 dev 里的这些参数

assetsPublicPath: './'
或者
assetsPublicPath: '/hot/',

再打开！好了！

当然，如果你还用到了vue-router

要在router的配置中加上

export default new Router({
  mode: 'history',
  base: '/hot/', //加上这一行

http://www.cnblogs.com/zhuzhenwei918/p/6866094.html

以上是 vue-webpack 做出来的项目部署到服务器上，点开是空白页（我这里把项目发布到git上） 的全部内容， 来源链接： utcz.com/z/378836.html

回到顶部