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

2020-06-14 06:23:25易采站长站整理

构建

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

npm run build

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

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

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

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

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

npm run build <test|pre|prod>

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

文件内容表示的分别是不同环境下的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」文件夹)到新项目的文件夹,修改配置后进行后续开发。

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

两种场景都离不开「克隆或拉取」、「复制和粘贴」,这种做法一是麻烦,二是逼格太低。所以后来我用Node.js写了一个命令行工具「webapp-cli」来完成这两项工作。

初始化项目的命令为:


webapp init [projectPath]

例如: