Vue.js项目模板搭建图文教程(2)

这就意味着,项目中的所有路径都要加上一层目录(比如原访问路径为「:8080/home」,现在就得改成「:8080/project-a/home」)。千万别以为这是很简单的事情,实际上要改的地方是很多的。

首先要改的是「Vue-Router」的 基路径 配置:

new Router({ base: '/project-a/', // 基路径 mode: 'history', routes: [ { path: 'https://www.jb51.net/', component: Home } ] });

设置基路径后,跟路由相关的所有路径都是相对基路径,而不是根目录。

然后是开发服务器的 资源发布路径 (/config/index.js):

dev: { assetsPublicPath: '/project-a/' }

对应地还要修改「/build/dev-server.js」的两处地方,不然访问的时候就会404:

require('connect-history-api-fallback')({ // 默认为"/index.html",因为资源发布路径改了,所以这里也要对应上 index: '/project-a/index.html' }) // 运行项目后默认打开的页面地址 var uri = 'http://localhost:' + port + '/project-a/'

最后还要修改 Webpack热更新的检测路径 。先修改「/build/dev-server.js」:

require('webpack-hot-middleware')(compiler, { log: false, path: '/project-a/__webpack_hmr' })

然后修改「/build/dev-client.js」:

require('webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true&noInfo=true&reload=true')

顺带一提,上面的这堆参数完全是用源代码调试的结果,官网文档并没有详细说明。

全部改完之后可以发现,跟目录有关的代码有5处,具体项目使用的时候岂不是要改5次?非常麻烦。这种情况下,把这部分逻辑写成一个公共函数去调用是最好的选择。新建文件「 /src/add-dirname.js 」:

const DIR_NAME = '/project-a/'; module.exports = function(path) { return (DIR_NAME + path).replace(/\/{2,}/g, 'https://www.jb51.net/'); };

然后把刚才涉及添加一级子目录的代码全部改成调用该函数来实现:

Vue.js项目模板搭建图文教程

这样一来,如果要修改一级子目录,只需要修改常量「DIR_NAME」的值就可以了。

公共代码

我们的公共代码分为三种:

通用性较强的库 :包括团队成员编写的一些通用库、无法通过npm安装的通用库等,跟业务无关;

业务逻辑库 :跟业务有关,但是跟表现层无关的公共代码;

业务组件库 :表现层的组件。

它们都位于「/src/public」:

Vue.js项目模板搭建图文教程

在每一种公共代码的文件夹内,具体某一个库或者组件的目录结构如下:

/src/public/components/img-box

img-box.vue

1.1

这里要特别提一下的是 版本号 这一层文件夹。如果对库或者组件的修改会造成以前的调用代码不兼容,就不应该修改原文件,而是新建一个版本号文件夹,把新的代码以及其余的资源文件都放到这个新文件夹中。这样做的好处是,具体的项目要更新公共代码时,直接把项目模板的「/src/public」覆盖过去就行,不用担心不兼容。

构建

「webpack」这个项目模板已经配置好构建的逻辑。通过一个命令就可以执行构建:

npm run build

根据默认配置,代码会被发布到项目根目录下的「dist」文件夹内。然而,这样简单粗暴的发布方式并不能满足实际需求:

资源文件(图片、CSS、JS等)要发布到 CDN服务器 ;

HTML中要通过完整的URL引用资源文件(因为资源文件在CDN的域上);

不用的环境(测试、预发布、生产)使用不同的域访问。

先解决区分环境的问题,我们在构建命令中新增一个参数以表示环境:

npm run build <test|pre|prod>

然后在根目录下新建一个配置文件「conf.json」(简单起见,只写了两种环境的配置):

Vue.js项目模板搭建图文教程

文件内容表示的分别是不同环境下的HTML文件发布路径、资源发布路径以及资源访问路径。

接下来就要把这些配置接入到「Webpack」的打包配置中。修改「/config/index.js」,先在开头加上:

var env = process.argv[2]; // 环境参数(从0开始的第二个) var conf = require('../conf'); // 找出对应环境的配置conf.indexRoot = conf.indexRoots[env]; conf.assetsRoot = conf.assetsRoots[env]; conf.assetsPublicPath = conf.assetsPublicPaths[env];

然后修改构建部分的代码:

build: { index: path.resolve(__dirname, conf.indexRoot + 'index.html'), assetsRoot: path.resolve(__dirname, conf.assetsRoot), assetsPublicPath: conf.assetsPublicPath }

此时运行构建命令,就可以把项目发布到「conf.json」指定的路径中。

小结

至此,项目模板搭建完毕。其实最重要的一点就是 可配置化 ,否则,开发具体项目的人初始化一个项目还要改十几个地方,效率就很低了。

项目模板的使用

项目模板已经搭建好了,但是怎么用呢?有两种常用场景:

初始化新项目 :克隆或拉取项目模板项目,复制该项目的所有文件(除了「.git」文件夹)到新项目的文件夹,修改配置后进行后续开发。

更新公共代码 :克隆或拉取项目模板项目,复制要更新的代码到目标项目的对应路径。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyzxyd.html