vue-cli 脚手架注意事项

2017-02-09 散崖 3440人已阅读

最近流行的几大框架,vuejs算是其中之一,之前用了一点时间基于vuejs,通过vue-cli脚手架构建uedc用研分析处的卡片官方网站(点击查看),因为是单页应用,所以脚手架选择vue-cli webpack 版本!后端是基础古老的公司cms,到处都是坑,所以需要对于脚手架进行一番的修改,下面对于vue-cli 一些项进行说明

一、文件目录结构

build、config:开发环境和运行环境的配置打包构建方式配置

dist:构建后的保存的目录

src:开发项目文件存放处

static:网站静态资源,该文件夹中的文件在构建的时候,是直接进行拷贝,不做任何处理的,所以像favicon.icon 这种图片就适合存放在这个文件夹里面,网站logo页可以放在这个文件夹中

其他几个文件或者文件夹一看便知道 .babelrc 用来进行es 转化配置文件(webpack+babel的方式),.gitignore提交的时候忽略的文件和文件夹配置

二、项目过程中遇到的几个问题

1、跨域请求如何配置?

构建项目是在本地运行,在开发环境中,如果想要请求线上的某个url,浏览器会错误提示,App.vue 如下:

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'app',
    created() {
        this.$http.get('http://wnworld.com/data/data1.json').then(response => {
                console.dir(response.body);
            })
        }
}
</script>
<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

这个时候我们进入到config/index.js 文件中,做了如下修改:
 

 
<template>
    <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'app',
    created() {
        this.$http.get('/data/data1.json').then(response => {
                console.dir(response.body);
            })
        }
}
</script>
<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

这样子,跨域的请求就完成了,在解析映射的时候,如果碰到‘/data’ 或者‘../data’都会被解析成 http://wnworld.com/data(所以例子中就会被解析成ttp://wnworld.com/data/data1.json)

2、本地目录和线上目录不一致的时候如何配置?

成员A单独做了一个模块,该模块网站一个子模块,单独项目,开发的时候本地文件夹开发,发布的时候在需要放在服务器某个文件夹中,例如开发的时候文件项目名字(myproject),发布到线上的文件夹名字——cardmethod,这个时候config/index.js 应该做一定修改保证引index.html 引入的文件路劲正确: 

  

打包出来(npm run build)以后的index.html 如下

这个时候上传到服务器的文件夹中,保证路劲的正确性!
assetsPublicPath:网站存放的所在的根路劲

assetsSubDirectory:资源存放的路劲

所以  npm run build 打包构建后css js 引入index.html的路劲就是 assetsSubDirectory+assetsPublicPath+生成的文件名字

3、资源路劲的问题

vue-cli中建议都用相对路劲来引入css、scss、第三方模块

上一篇:

下一篇:

交换友情链接