Vue创建项目过程(vue ui)以及配置端口号 傻瓜教程
1.先cd到你需要创建项目的位置,后进行vue ui2.在弹出的Vue项目管理器中点击创建,步骤如下几张图这边 注意一下,router和vuex打开,Linter关闭保不保留取决于你,可以保留,这样下次配置就可以省去上面这几步现在就等待创建完成了,在命令控制窗口可以看到一直在下准备项目,等待完成即可。成功后会弹出这个窗口,可能有些电脑会没有回到之前的vue项目管理器那里,会发现变成了这个页面,成功
·
1.先cd到你需要创建项目的位置,
后进行
vue ui
2.在弹出的Vue项目管理器中点击创建,步骤如下几张图
这边 注意一下,router和vuex打开,Linter关闭
保不保留取决于你,可以保留,这样下次配置就可以省去上面这几步
现在就等待创建完成了,
在命令控制窗口可以看到一直在下准备项目,等待完成即可。
成功后会弹出这个窗口,可能有些电脑会没有
回到之前的vue项目管理器那里,会发现变成了这个页面,成功创建,接下来用IDEA打开即可
运行后打开网址出现这个界面,配置则全部完成。
有些朋友可能不知道怎么配置端口号,在vue项目管理器里是没办法配置端口号的,要进入到IDEA中,手动添加文件 vue.config.js 才可以覆盖掉原有的端口号
1.首先新建一个文件名为 vue.config.js
2.输入下面的代码,端口号设置为了1215,可以自己修改
const path = require("path");
const resolve = function(dir) {
return path.join(__dirname, dir);
};
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
outputDir: "dist",
assetsDir: "static",
lintOnSave: true, // 是否开启eslint保存检测
productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
chainWebpack: config => {
config.resolve.alias
.set("@", resolve("src"))
.set("@v", resolve("src/views"))
.set("@c", resolve("src/components"))
.set("@u", resolve("src/utils"))
.set("@s", resolve("src/service")); /* 别名配置 */
config.optimization.runtimeChunk("single");
},
devServer: {
// host: "localhost",
/* 本地ip地址 */
//host: "192.168.1.107",
host: "0.0.0.0", //局域网和本地访问
port: "1215",
hot: true,
/* 自动打开浏览器 */
open: false,
overlay: {
warning: false,
error: true
},
/* 跨域代理 */
proxy: {
"/api": {
/* 目标代理服务器地址 */
target: "http://m260048y71.zicp.vip", //
// target: "http://192.168.1.102:8888", //
/* 允许跨域 */
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": ""
}
}
}
}
};
更多推荐
已为社区贡献1条内容
所有评论(0)