vue-cli 3.0 使用遇到的一些问题

关于创建项目

windows下,习惯了用git bash 来输入node命令,结果在使用vue-cli3.0创建项目时, 出现无法选择配置项的情况下,改用终端命令即可。


git base

window 命令提示符

通过上下键选择默认(default)还是手动(manually)。选择手动,通过空格来控制是否选中:


vue.config.js

修改配置之后,需要运行 npm run build,重新构建下项目,否则所做的修改可能不会生效。

devServer.proxy
设置代理的时候,path,如https://example.com:8042/over/there?name,写前面的over会生效,换成there却无效。(path is used for context matching.

proxy: {
            '/interface': {
                target: 'https://www.abc.com',   //目标域名或IP
                ws: false,  //是否代理websocket
                secure: true,  //https 开启
                changeOrigin: true,  // 跨域开启
                pathRewirte: {
                    '^/interface': '/interface'   //https://www.abc.com/interface/xxx   
                }
            }
        },
         foo://example.com:8042/over/there?name=ferret#nose
         \_/   \______________/\_________/ \_________/ \__/
          |           |            |            |        |
       scheme     authority       path        query   fragment

public
2.0index.html页面移入到public中,一些不想打包的文件可以直接放入到public中。如demo.html可以通过http://localhost:8080/demo.html直接访问(2.0的需要在前面添加static)。

demo.html

多页面创建
vue-cli 3.0创建多页面应用的话,只需要设置下pages即可。

pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时,
            // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
            title: 'Index Page',
            // 在这个页面中包含的块,默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时,
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话,就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpage: 'src/subpage/main.js',
        //入口,模板,输出
        demo: {
            entry: 'src/demo/demo.js',
            template: 'src/demo/demo.html',
            filename: 'demo.html',
        }
    },
局部目录结构

你可能感兴趣的:(vue-cli 3.0 使用遇到的一些问题)