实战Vue简易项目（2）定制开发环境

woshicixide 发布于2019-08-23 10:33 / 2549人阅读

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

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

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-loader、node-sassNPM包：npm i -D sass-loader、npm 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.json的scripts中修改 "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.assign、Array.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呢？

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

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

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

思考

项目结构怎么搭建呢？

页面结构怎么布局呢？

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

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

混合云专线服务 android经典项目开发实战 php项目开发环境简易php环境 vue.js 2 cdn

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

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

实战Vue简易项目（1）初始化环境配置

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

mindwind 2019-08-23 10:30 评论0 收藏0
学习不一样的vue实战(1): 环境搭建

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

BoYang 2019-08-29 12:41 评论0 收藏0
学习不一样的vue实战(1): 环境搭建

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

Atom 2019-08-20 16:59 评论0 收藏0
学习不一样的vue实战(1): 环境搭建

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

Ryan_Li 2019-08-05 11:21 评论0 收藏0
学习不一样的vue实战(1): 环境搭建

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

OnlyLing 2019-08-01 16:56 评论0 收藏0