小白研究项目部署-关于vue项目部署遇到的一些问题

在搞清root，alias，try_files的基本用法后，我开始尝试vue项目的部署。

（用法我之前的文章也研究过）

此前，听说挺多小伙伴会遇到vue-router-history模式种种问题，比如路径无法匹配，找不到静态资源，刷新页面404，etc

不急，只要找到原因，问题是可以迎刃而解的。

项目部署环境一般可以分为三种：生产环境，测试环境，开发环境。

开发环境 ：开发环境时程序员专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。

生产环境 ：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。部署分支一般为master分支。

测试环境 ：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器，是开发环境到生产环境的过渡环境。

测试环境的分支存在bug，一般不会让用户和其他人看到，并且测试环境会尽量与生产环境相似。

如何区分生产环境和开发环境？

processenvNODE_ENV 是 node 的全局变量 process 的一个属性，它的作用是区分当前环境是生产环境还是开发环境，

可以参考学习： 理解webpack中的processenvNODE_ENV

其实一般的vue单页面应用项目中，遇到路径无法匹配，或者资源引用错误问题都是由于以下几个属性造成的，如果你经常翻官网文档，那看到这里应该就已经会意，他们分别是：

接下来我将讲解以下这几个属性的使用。

依照官网的解释，贴一张用法图：

当使用基于 HTML5 historypushState 的路由时，“相对 publicPath” 会受到限制，即是说在使用history模式时，publicPath需要设置为绝对路径。那么在vueconfigjs文件中，你应该这样配置：

在nginx配置文件中你就需要这样配置：

假设我的项目名为history，并且放在/usr/local/webserver/nginx/myProject 目录下，如tree图

示例贴一下： 珂朵莉的服务器 (点击about会使用路由跳转)

如果你的配置出现页面空白，或者404访问错误，资源引用问题（F12可观察），这时你就要检查publicPath，assetsDir甚至是nginx有没有配置正确了。

我觉得原因是页面刷新时，服务器找不到任何的静态资源，就报404，那么解决办法就简单了： 你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 indexhtml 页面，这个页面就是你 app 依赖的页面。即使用try_files 寻找indexhtml。

可以参考本项目的nginx配置：

但如此配置后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 indexhtml 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

参考官网例子：

另一方面,有可能是Vue-Router没有配置好，需要注意初始化Router时候的base参数:

如此项目部署就完成了。

感谢博哥指出之前文章错误之处，已经修正，谢谢

    在Vue中引用外部SCSS(SCSS里面使用了)时，loader报错：

/images/xxxpng in /node_modules/css-loader{"sourceMap":false}!/node_modules/vue-loader/lib/style-compiler{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!/node_modules/sass-loader/lib/loaderjs{"sourceMap":false}!/node_modules/vue-loader/lib/selectorjstype=styles&index=0&bustCache!/src/Appvue

    原因：

        1 某scss文件引用了其它目录的文件

        2 在appvue中使用scss时，用scss的语法引入了该scss文件

        3 最终loader解析路径出错

需要先安装 node-sass及sass-loader

npm i node-sass --save-dev

npm i sass-loader --save-dev

<style lang="scss">

    @import '/assets/style/indexscss'

</style>

这种引入方法的前提是：在scss中没有使用到时编译通过。当在scss中引用时，编译报错，loader错。原因是路径解析错误。

test {

background-image:url("/images/xxxpng");

}

require('/assets/style/indexscss')

或 import '/assets/style/indexscss'

<style lang="scss">

    @import '~@/assets/style/index'

</style>

css loader 会把非根路径的url解析为相对路径，加`~`前缀才解析为模块路径。

在indexscss中使用：

test {

    background-image: url("/assets/image/xxxpng");

    background-repeact: no-repeact;

}

我们需要在template，script，style下引用，如下。

比如

这里能用 @assets 是因为在 vueconfigjs 里面设置了如下参数。

本地开发的时候，因为域名是 >

因为 Vue Router 支持 嵌套路由 ，所以愉快的写起了相对路径。

一时相对一时爽，可是此时非彼时。

想要根据 routes 渲染菜单，菜单就需要路由跳转，而我又没有写 name 命名路由 ，故如下跳转不可行：

可是 this$routeroptionsroutes 这货也拿不到绝对路径 path ，故如下跳转也不可行：

此解有三：

写绝对内心有点抵触，命名亦是个头疼的事情，那

把拿到 this$routeroptionsroutes 的数据进行重组呗

假设路由：

转换函数：

测试：

---- Vinci, Sunday, September 29 2019, Sunny

以上就是关于小白研究项目部署-关于vue项目部署遇到的一些问题全部的内容，包括:小白研究项目部署-关于vue项目部署遇到的一些问题、在Vue中使用sass及sass图片路径问题、vue的图片路径引用问题解决等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！