vue-cli 3.0 开发单页应用

Error: getaddrinfo ENOTFOUND localhost

启动 vue ui 的时候,报这个错误。解决方式:打开 host 文件,把 127.0.0.1 绑定上 localhost 。

手机访问 出现 invalid host header

用手机访问本地服务时,会出现这个提示,在 devServer 的配置里加上一个:disableHostCheck: true,关闭 host 检查。

配置 webpack alias

配置 alias 别名,就不用纠结文件路径层级这些了。

// vue.config.js
module.exports = {
    ...,
    chainWebpack: (config)=>{
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets',resolve('src/assets'))
            .set('@components',resolve('src/components'))
            .set('@utils',resolve('src/utils'))
    }
}

配置sass 全局变量

都需要使用vue.config.js
执行 npm install --save-dev sass-resources-loader

判断开发环境和生产环境

使用process.env.NODE_ENV来判断,在所有的文件里面都可以访问到这个变量。

使用Vue ui 里面的 tasks 可以直接运行命令行 比如打包、检查等,还可以直接安装依赖和插件。

组件和路由的按需加载

组件和路由都是按照这样的方式引入,这样就可以做到在单页页面上,同样是按照跳转页面之后才会页面对应的js。
原来:
import Component from '@components/Component'
现在:
const Component = () => import('@components/Component')

添加百度统计

单页应用如果需要统计到每一页的数据,在 vue 路由的钩子事件里面动态的添加统计代码。

Routers.afterEach((to, from) => {
	// 添加百度统计代码
    setTimeout(() => {
        var _hmt = _hmt || [];
        if(process.env.NODE_ENV!=='development'){
        (function() {
            //每次执行前,先移除上次插入的代码
            document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove()
            var hm = document.createElement("script")
            hm.src = "https://hm.baidu.com/hm.js?********************"
            hm.id = "baidu_tj"
            var s = document.getElementsByTagName("script")[0]
            s.parentNode.insertBefore(hm, s)
        })()
    }, 0)
}
})

打包后,部署到服务器子目录上

如果不指定资源文件夹,vue 默认是打包在根目录下的,如果文件夹放在服务器上的子目录下,那就要单独配置一下了,vue-cli-3 里面配置起来也还比较简单:
第一步,打开 vue.config.js ,把 baseUrl 设置成为 /child-folder-name/ 。这时候你再看打包出来的 index.html,文件引入的路径都加上了子目录的前缀。
第二步,打开你的路由配置文件 router.js ,把 base 设置成 /child-folder-name/,欧了,大功告成了。

posted @ 2019-04-04 14:07  下小朋友  阅读(644)  评论(0编辑  收藏  举报