Vue项目自定义host端口

1.如何区分是否是vue-cli脚手架搭建的项目

项目的根目录会有一个package.json的文件，我们直接在这个文件里搜索下是否有vue-cli的字眼。如果有的话就是vue-cli创建的项目。

2. vue-cli脚手架创建的项目设置方法

默认vue的项目是8080端口，可以在vue.config.js中配置，如果没有就在项目根目录创建一个

还有很多其他选项，具体可以看webpack的文档，这里省略一下

vue.config.js

module.exports = {
    devServer: {
        host: "free.iule.net",  //指定要使用的 host
        port: 80,   //指定端口号以侦听
        hotOnly: false, //启用热模块替换，而无需页面刷新作为构建失败时的回退。
    },
};

3. webpack的设置方法

和上面的设置方法一样，只不过是在webpack.config.js中设置，没有就在项目根目录创建一个

webpack.config.js

module.exports = {
    devServer: {
        host: "free.iule.net",  //指定要使用的 host
        port: 80,   //指定端口号以侦听
        hotOnly: false, //启用热模块替换，而无需页面刷新作为构建失败时的回退。
    },
};