vuecli3修改html,vue-cli3简单使用配置

1.下载安装vue-cli3，这里我使用npm安装

npm install -g @vue/cli

如果已经安装之前版本(1.x或2.x)需要先卸载，再安装新的版本。

安装完成后可以通过vue --version命令查看版本

2.创建一个项目

vue-cli3和之前创建一个项目的命令不同

vue create project-name // vue-cli3

vue init webpack project-name //vue-cli2

之后就是创建项目时的一些选项，根据需要选择，需要注意的是如果不是很熟悉，不要开启语法检查。然后就等文件下载完毕。

image.png

等文件下载完毕打开项目，发现项目结构和之前的版本有点不同，config和build文件夹不见了，index.html文件也不见了，却多了pubilc文件夹。打开public发现index.html文件在这里。

3.配置

之前的配置文件都不见了，应该怎么修改配置呢，我们可以在项目下和package.json文件同级目录下新建vue.config.js文件，这是一个可选文件，如果存在就会被@vue/cli-service自动加载。

这个文件格式应该为：

// vue.config.js

module.exports = {

// 选项...

}

导出的对象有多个选项，具体可以查看官方文档https://cli.vuejs.org/zh/config/

用过vue-cli2的同学应该都知道，如果按照默认的配置，文件的路径是会有问题的，需要手动修改。比如css文件、js文件、还有图片等静态资源。

新版本的脚手架修改起来就比较方便了，只需要在vue.config.js里面加上一行

// vue.config.js

module.exports = {

baseUrl: './', // 配置基本url

}

baseUrl的详细解释可以去官网查看。

vue-cli3还给出了多页面的配置选项pages，这比之前配置多页面要方便的多。

module.exports = {

pages: