资讯专栏INFORMATION COLUMN

实战Vue简易项目(2)定制开发环境

woshicixide / 2545人阅读

摘要:至于,为什么跟踪文件因为这个功能是开发环境下独有的,要修改开发环境吖,必然找开发环境的配置文件进行跟踪。测试可行性重启项目后,在浏览器中输入是你本地,可通过查看能够访问,就说明局域网内的其他端可以访问。然而,这样并没有结束。

本章内容包含上一章思考的解决,还有一些其它的定制...

CSS预处理

关于对.vue文件模块处理规则的配置依次可在build/webpack.base.conf.js->build/vue-loader.conf.js->build/utils.js文件中跟踪;

loaders的关键在于build/vue-loader.conf.js文件中对utils.cssLoaders的调用:

...
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
...

说了这么一堆,我想表达啥呢?

因为个人在项目中,习惯用scss编写样式,跟踪以上文件发现,针对.vue文件的预处理loaders中已经包含对scss的处理:

//utils.js文件

exports.cssLoaders = function (options) {
  options = options || {}
...
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders("less"),
    sass: generateLoaders("sass", { indentedSyntax: true }),
    scss: generateLoaders("sass"),
    stylus: generateLoaders("stylus"),
    styl: generateLoaders("stylus")
  }
}

这样,是不是可以直接使用scss了呢?

恭喜你,会报错...

查找发现,package.json中并没有关于sass-loader的依赖,所以,我们需要安装sass-loadernode-sassNPM包:npm i -D sass-loadernpm i -D node-sass

测试可行性

安装完成后,在src/components/HelloWorld.vue文件中进行测试:

局域网访问

默认情况下,初始化的环境是不允许局域网访问的,如果想局域网访问的话,跟踪路径build/webpack.dev.conf.js为什么跟踪这个文件呢?)可以发现:

devServer: {
    clientLogLevel: "warning",
...
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
...

这里指定了host字段,而HOST值在该文件可查找到const HOST = process.env.HOST,也就是说,如果想要局域网内访问,有两种解决方案:

在命令行中配置--host 0.0.0.0,即在/package.jsonscripts中修改 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

config/index.js中:

module.exports = {
  dev: {
...
    host: "localhost", // can be overwritten by process.env.HOST
    port: 8080,
...

修改host: "localhost",host: "0.0.0.0",,即可;

推荐使用配置文件修改,即:第二种。

至于,为什么跟踪build/webpack.dev.conf.js文件?

因为这个功能是开发环境下独有的,要修改开发环境吖,必然找开发环境的配置文件进行跟踪。

注意:

修改本地服务器配置,要重启本地服务器(在命令行中Ctrl + c,然后npm run dev即可)才可应用新的配置。

测试可行性:

重启项目后,在浏览器中输入http://192.168.1.106:8080/#/192.168.1.106是你本地IP,可通过ipconfig /all查看)能够访问,就说明局域网内的其他端可以访问。

不信?你试试手机。

打包文件路径

如果,你想和其它朋友分享你的成果,部署到服务器上或直接打包发给朋友,通过npm run build即可生成静态资源dist/

然而,打开dist/index.html,发现是空白页,控制台还报错(资源找不到),人生失去了希望...

这是因为webpack生产配置文件output.publicPath配置有问题,跟踪文件build/webpack.base.conf.js->build/webpack.prod.conf.js

很好,我们在build/webpack.base.conf.js中就发现了:

  output: {
    path: config.build.assetsRoot,
    filename: "[name].js",
    publicPath: process.env.NODE_ENV === "production"
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

跟踪config.build.assetsPublicPath找到config/index.js,修改:

  build: {
    // Template for index.html
    index: path.resolve(__dirname, "../dist/index.html"),

    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/", //将assetsPublicPath的值修改为"./"

为什么这样修改呢?

这是因为打包文件引用所在地址的组成规则为output.publicPath + filename

然而,这样并没有结束

如果在样式中引入图片,会报图片路径错误,引用地址static/css/static/css/img/XXX.png

需要修改build/utils.js

   if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader",
        publicPath: "../../"
      })
    } else {
      return ["vue-style-loader"].concat(loaders)
    }

webpack打包要区分两个路径:

打包路径(文件存储位置:output.path + [filename | name])

引用路径(文件互相引用的位置:output.publicname + [filename | name])

ES6+

目前还不能结束...

目前ES6的语法成为了主流,如果你在项目中使用了ES6,在一些较旧的浏览器中,呵呵...

Object.assignArray.from...方法无法使用,程序报错。

怎么办呢?

npm i -S babel-polyfill安装polyfill,它会为ES2015+添加的新的API作兼容为低版本浏览器可用,俗称“垫片”。

需要将polyfill打包到生产包中,即build/webpack.base.conf.js文件中:

module.exports = {
  context: path.resolve(__dirname, "../"),
  entry: {
    app: "./src/main.js" //需要修改为app: ["babel-polyfill","./src/main.js"]
  },
章节回顾

还记得如何预处理scss么,那如果使用Less呢?

还记得如何局域网访问么,那如果想修改端口呢?

还记得如何打包部署么,可能会出现什么问题?

还记得如何考虑旧版本浏览器兼容么?

思考

项目结构怎么搭建呢?

页面结构怎么布局呢?

哪些组件可以分离出来呢?

哪些工具单元可以分离出来呢?

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96449.html

相关文章

  • 实战Vue简易项目(1)初始化环境配置

    摘要:目前,我们还没有创建项目,进入预期项目目录的上一级文件目录下即可。使用脚手架初始化项目最后一个为项目名称,可以自定义其它名称。 本章以下命令都是在cmd命令行中进行的。 安装命令行 npm i -g vue-cli 安装完成后,输入vue -V返回版本号,即安装成功; 初始化项目 切换到项目目录下 项目目录,即项目所在目录。 目前,我们还没有创建项目,进入 预期项目目录 的上一级文件目...

    mindwind 评论0 收藏0
  • 学习不一样的vue实战(1): 环境搭建

    摘要:淘宝镜像是一个完整镜像,你可以用此代替官方版本只读,同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的,包括热加载,静态检测,单元测试一个简易的,以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好和工作的需要,一直...

    BoYang 评论0 收藏0
  • 学习不一样的vue实战(1): 环境搭建

    摘要:淘宝镜像是一个完整镜像,你可以用此代替官方版本只读,同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的,包括热加载,静态检测,单元测试一个简易的,以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好和工作的需要,一直...

    Atom 评论0 收藏0
  • 学习不一样的vue实战(1): 环境搭建

    摘要:淘宝镜像是一个完整镜像,你可以用此代替官方版本只读,同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的,包括热加载,静态检测,单元测试一个简易的,以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好和工作的需要,一直...

    Ryan_Li 评论0 收藏0
  • 学习不一样的vue实战(1): 环境搭建

    摘要:淘宝镜像是一个完整镜像,你可以用此代替官方版本只读,同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的,包括热加载,静态检测,单元测试一个简易的,以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好和工作的需要,一直...

    OnlyLing 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<