nuxt常用配置项

1.1 CSS全局配置

在assets/css/目录下创建一个样式文件叫：normailze.css

html {  color:red; }
1

找到nuxt.config.js文件添加如下代码：

/*
    ~  代表根目录，相当于VUE中配置的@符号
*/
css:['~assets/css/normailze.css'],  
1
2
3
4

1.2 配置IP和端口

开发中指定固定IP与端口号，找到package.json文件输入以下内容

/*
        host    表示IP地址
        port    表示端口设置
*/
"config":{
   "nuxt":{
         "host":"127.0.0.56",
          "port":"8000"
     }
},
1
2
3
4
5
6
7
8
9
10

1.3 webpack中的loader配置

配置一个url-loader来进行小图片的64位打包，在nuxt.config.js的build选项里进行配置

build: {
    rules:[
      {
          //处理图片资源
          //问题:默认处理不了html中img图片
          test:/\.(png|jpe?g|gif|svg)$/,
          //使用一个loader
          //下载 url-loader file-loader
          loader:'url-loader',
          options:{
            limit:10000,
            name:'img/[name].[hash].[ext]'
          }
      }
    ],
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

以上无论哪一环节配置好后进行npm run dev重启