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": ""
                }
            }
        }
    }
};

 

Logo

前往低代码交流专区

更多推荐